addClass в JQuery

Question

Я довольно новый в JQuery, и у меня есть вопрос о addClass(). Я потратил некоторое время, чтобы попытаться заставить это работать, но похоже, что я сделал что-то неправильно. Я создал верхнее меню с HTML и бутстрапом. Я предполагаю, что посетители сначала приземлятся на мой index.php, поэтому я создал класс = «active» для моего index.php. Затем, если они нажмут на любую другую ссылку в верхнем меню (например, О нас), то класс = "active" добавит и удалит class = "active" со вкладки "li" для index.php.

Ниже мой HTML код:

<div class="nav-collapse collapse"> 
    <ul class="nav pull-right"> 
     <li id="home" class="active"><a href="index.php"> Home</a></li> 
     <li id="about"><a href="about_us.php"> About Us</a></li> 
     <li id="browse"><a href="browse.php"> Browse</a></li> 
     <li id="contact"><a href="contact.php"> Contact</a></li> 
    </ul> 
</div> 

И ниже код JQuery, который я использую, и попытаться получить это сделать.

$(function(){    
    var sidebar = $('.nav'); 
sidebar.delegate("li", "click", function(){ 
    if($(this).hasClass('active')){ 
    //If click on the tab that is currently active, it will do nothing. 
    }else{  
      sidebar.find('.active').addClass('inactive'); 
      sidebar.find('.active').removeClass('active'); 
      $(this).removeClass('inactive');    
      $(this).addClass('active'); 
     } 
    }); 
}); 

Я проверил его на своем локальном сервере. Я мог видеть, что вкладка в моем верхнем меню стала серым после того, как я нажал на нее, но она не осталась. Поэтому я уверен, что сделал что-то не так, но не знаю, где. Я действительно новичок в JQuery, поэтому надеюсь, что смогу научиться у вас, ребята. Спасибо!

Answer 1

При щелчке по ссылке браузер переходит на совершенно новую страницу, которая запускает совершенно новую среду javascript, и ничего, что вы сделали с текущей страницей, переносится на только что загруженную страницу.

Таким образом, активный класс может быть изменен на текущей странице, но затем загружается целая новая страница, которая ничего не наследует от первой страницы (например, начинается с нуля). Ваш код с первой страницы больше не воспроизводится после загрузки новой страницы.

Вам нужно либо просто закодировать активный класс на каждую отдельную страницу (поскольку каждая страница знает, на какой странице она), либо имеет один общий набор JS, который устанавливает активный класс, когда страница загружается на основе URL-адреса, так что это правильно настроиться при загрузке страницы.

---

Кроме того, вам, вероятно, не нужен неактивный класс. Состояние CSS по умолчанию может представлять неактивный внешний вид, а активный класс может применять переопределение CSS для отображения активного состояния.

Answer 2

Это не работает, потому что когда кто-то нажимает на другую ссылку, они перенаправляются на другую страницу. Однако ваш заголовок не знает, на какую ссылку было нажата ни на какой странице. Вы должны сообщить своему заголовку, какая страница вы есть. Имеет ли это смысл?

Answer 3

Другие ответы верны, когда вы нажимаете на тег, который вы открываете на новой странице, и, следовательно, теряете среду javascript.

Если вы хотите иметь одностраничное приложение, вы можете использовать preventDefault, чтобы остановить браузер от ссылки.

sidebar.delegate("li", "click", function(e){ 
    e.preventDefault(); 
    if($(this).hasClass('active')){ 
     //If click on the tab that is currently active, it will do nothing. 
    }else{ 
     sidebar.find('.active').addClass('inactive'); 
     sidebar.find('.active').removeClass('active'); 
     $(this).removeClass('inactive');    
     $(this).addClass('active'); 
    } 
});