單擊特定類的鏈接時更改主體的CSS屬性

Question

我有一堆燈箱，它們都具有相同的類 ，但具有單獨的ID。 當您單擊時：

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

我希望Javascript添加overflow: hidden; 到#page_wrap 。 我希望這適用於具有該類.lightbox所有<a> ，然后使用<a href="#close">關閉燈箱時，我希望CSS屬性恢復為原始狀態（ overflow: scroll; ）。

這是我的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');
}