JQuery не работает для меню. Когда я выбрать конкретный список в меню его не становится активным

Question

<ul> 
    <li class="active" ><a href="home">Home</a></li> 
    <li><a href="about">About</a></li> 
    <li><a href="contact">Contact</a></li> 
    </ul> 
    <ul> 
    <li><a href="login">Your Account</a></li>  
    <li><a href="logout"> Logout</a></li> 

    </ul> 
</div> 

[HTML и Jquery код] [1] https://i.stack.imgur.com/ASdUG.png

[HTML страница вывода] [2] : https://i.stack.imgur.com/gDGK7.png

Answer 1

Возможно, проблема заключается в том, чтобы заказать css и js.Посмотреть код ниже и попробовать, сообщите мне, если это вам полезно.

<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 2

Проблема возникает при запуске jQuery click события на одной странице & хочет, чтобы увидеть изменения на других страницах, это не возможно. Для этого вопроса, JQuery не будет работать должным образом, вы должны написать индивидуально active класс на каждой странице, так же, как это:

На домашней странице:

<li class="active"><a href="home"><span class="gyphicon glyphicon-home"></span> Home</a></li> 
<li><a href="about">About</a></li> 
<li><a href="contact">Contact</a></li> 

На о странице:

<li><a href="home"><span class="gyphicon glyphicon-home"></span> Home</a></li> 
<li class="active"><a href="about">About</a></li> 
<li><a href="contact">Contact</a></li> 

на странице контактов:

<li><a href="home"><span class="gyphicon glyphicon-home"></span> Home</a></li> 
<li><a href="about">About</a></li> 
<li class="active"><a href="contact">Contact</a></li> 

Я надеюсь, это будет полезно для вас.

Answer 3

Попробуйте этот код:

var selector = '.nav li'; 
$(selector).on('click', function(){ 
    $(selector).removeClass('active'); 
    $(this).addClass('active'); 
}); 

---

И изменить порядок JS файла:

1. JQuery файл
расслоения плотной
2. бутстраповского min.js