使用某个类单击链接时更改正文的CSS属性

Question

我有一堆灯箱，都有相同的类，但是单独的ID。单击时：

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

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

这是我的codepen.

Answer 1

你只是希望下面的页面停止滚动？只需将overflow:hidden应用于body

即可

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

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

Answer 2

一些css：

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

如果你使用的是jQuery，你可以这样做：

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