Добавление / удаление CSS при загрузке страницы

#jquery #hash

#jquery #хэш

Вопрос:

Итак, моя проблема в том, что у меня есть «селекторы», которые показывают вам, в каком меню вы находитесь. Я использую два класса, классы selected и unselected .

Когда страница загружается, я загружаюсь на основе хэша в URL, и он загружается нормально (подразумевая, что моя функция для загрузки страницы работает!)

Теперь у меня есть отдельный метод под названием setSelect() , который в основном удаляет / добавляет CSS в пункты меню на основе переменной, объявленной в начале моего JS-документа.

Итак, вот код (я многое вырезал и сохранил только соответствующие части)

 var jlLocation = 1;

function setSelect() {
        if(jlLocation==1) {
            $('#location1').removeClass('unselected');  
            $('#location1').addClass('selected');
            $('#location2').removeClass('selected');    
            $('#location2').addClass('unselected');
        }
        else if(jlLocation==2) {
            $('#location1').removeClass('selected');    
            $('#location1').addClass('unselected');
            $('#location2').removeClass('unselected');  
            $('#location2').addClass('selected');
        }
 }

$(function(){
                // Bind an event to window.onhashchange that, when the hash changes, gets the
                // hash and adds the class "selected" to any matching nav link.
                $(window).hashchange( function(){
                    hash = location.hash;
                    document.title = 'Joy Luck '   ( hash.replace( /^#/, '- ' ) || '' )   ''; // Set the page title based on the hash.
                    setSelect();
                    if (hash == "#Home") {
                        showHome();
                    }
                    else if (hash == "#Accommodations") {
                        showAccommodations();   
                    }       

                    $('#menu a').each(function(){
                        var that = $(this);
                        that[ that.attr( 'href' ) == hash ? 'addClass' : 'removeClass' ]( 'selected' );
                    });
                  })
                  $(window).hashchange();  
                });

Опять же, если я загружаю #home хэш или #accommodations эти методы запускаются, но setSelect(); метод не работает. Все методы помещаются перед методом, который загружает хэши, так что это не должно быть проблемой.

Редактировать

Я знаю, setSelect() что меня не вызывали. Это потому, что независимо от того, где я вызываю это в этом методе, это просто не сработало. Но, чтобы помочь, я вставил его.

1. Это опечатка, в вашем коде отсутствует } в первой функции для ее закрытия? Также вам действительно нужно повторно использовать селекторы. Не выполняйте $(‘#location1’) несколько раз. Соедините их в цепочку! $(«xxx»).addClass(«x»).removeClass(«y»);

2. Извините, он не выдержал моих вязких методов копирования и вставки. Он существует в моем исходном коде.

3. Переменная jlLocation никогда не меняется.

4. Это правильно, в этом примере это не меняется. Однако это не проблема, так как даже если это 1, условие сработает. Но проблема в том, что метод этого не делает.

Ответ №1:

Проблема в том, что вы никогда не вызываете setSelect() функцию (или, по крайней мере, ваш код показывает это)