当链接被某个类别点击链接时更改主体的CSS属性

Question

我有一堆灯箱，它们都具有相同类别，但是是单独的ID。当你点击：

<a class="lightbox" href="#lightbox_one">

我想Javascript来overflow: hidden;添加到#page_wrap。我希望这适用于所有<a>与该类.lightbox然后当灯箱关闭使用<a href="#close">我希望CSS属性恢复到原始状态（overflow: scroll;）。

这里是我的codepen.

Answer 1

你只是想在页面下方，以停止滚动？如果您在使用jQuery

.overflowHidden { 
    overflow: hidden; 
} 
.overflowScroll { 
    overflow: scroll; 
} 

你可以这样做：只是适用overflow:hidden到body

$(".lightbox").click(function(){ 
    $("body").css({"overflow":"hidden"}); 
}); 

$(".close").click(function(){ 
    $("body").css({"overflow":"auto"}); 
}); 

Answer 2

一些CSS

$('#content').on('click', '.lightbox', function() { 
    $('#page_wrap').removeClass('overflowScroll').addClass('overflowHidden'); 
}); 
$('div[id^=lightbox]').on('click', '.close', function() { 
    $('#page_wrap').removeClass('overflowHidden').addClass('overflowScroll'); 
}