Добавить класс к телу, если #hash находится в URL

Question

У меня есть следующий код, который добавляет класс к телу, если в URL есть #hash - но он работает только при перезагрузке браузера.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    $(document).ready(function() {

        if (window.location.href.indexOf('#login') != -1) {
            $(document.body).addClass('modalOpen');
        }

    });
</script>

Не уверен, что яделать неправильно?Я хочу добавить класс, когда кто-нибудь придет на homepage.com # login

Заранее спасибо!Andy

Answer 1

Проблема в том, что ваш код запускается, когда загружается document, и если пользователь достигает #login, document не будет загружен снова.Решение состоит в том, чтобы определить function отдельно

function hashChange() {
    if (window.location.href.indexOf('#login') != -1) {
        $(document.body).addClass('modalOpen');
    }
}

и вызвать его при событии onhashchange:

window.onhashchange = function() {
    hashChange();
};

Вы также можете вызвать его, когда страница загружена.

Answer 2

Просто используйте $('body').addClass('modalOpen'); без использования $(document.body).addClass('modalOpen');, поскольку body является тегом, а не классом, как определено в .body.

ИЗМЕНЕННЫЙ КОД

$(document).ready(function() {

    if (window.location.href.indexOf('#login') != -1) {
        $('body').addClass('modalOpen');
    }

});