Изменение CSS-свойств тела при нажатии на ссылку с определенным классом

Question

Изменение CSS-свойств тела при нажатии на ссылку с определенным классом

0

У меня есть набор лайтбоксов, которые имеют одинаковый класс, но отдельные идентификаторы. Когда вы нажимаете:

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

Я хочу, чтобы Javascript добавлял overflow: hidden; на #page_wrap. Я хочу, чтобы это применимо ко всем <a> с этим классом .lightbox Затем, когда лайтбокс закрыт с помощью <a href="#close"> я хочу, чтобы свойства CSS возвращались обратно в исходное состояние (overflow: scroll;),

Вот мой код.

Matthew Beckman 03 март 2014, в 01:04

Источник

Теги:

javascript

jquery

html

css

2 ответа

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');
}

Vasil Dininski 02 март 2014, в 21:42

0

Потрясающие. У @ jmore009 был немного более чистый ответ, но я рад видеть другой метод достижения того же самого желаемого результата. Благодарю.
Matthew Beckman 02 март 2014, в 23:28

Ещё вопросы

Потрясающие. У @ jmore009 был немного более чистый ответ, но я рад видеть другой метод достижения того же самого желаемого результата. Благодарю.

jmore009 · Accepted Answer · 2014-03-02T20-21-00.000Z

вы просто хотите, чтобы страница была внизу, чтобы остановить прокрутку? Просто примените overflow:hidden в body

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

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

Это именно то, что я искал! Спасибо, любезно.