Я вижу несколько модификаций здесь.
Во-первых, когда вы применяете выбранный класс, вы применяете ко всем li элементам, что неверно. Вы хотите применить класс только к нажатому элементу списка.
во-вторых, когда вы щелкаете по другому элементу списка, вы хотите удалить выбранный класс.
поэтому измененный код будет:
$('#navigation li').click(function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
});
Самое главное, у вас нет класса selected. Я поместил временное определение выбранного класса следующим образом:
.selected{
border: 1px solid #888;
background-color: #white;
}
Вы можете увидеть рабочий пример здесь: на JsFiddle
дополнительно , ваш элемент a имеет серый фон. так что вы можете захотеть применить выбранный класс белого фона к вашему элементу также .. что-то вроде:
$('a', this).addClass('selected'); //apply to anchor element also
и когда вы убираете класс, выполняйте ту же сделку.
Итак, вы хотите сохранить состояния кнопок на разных страницах. Javascript действителен только до тех пор, пока страница открыта. Как только пользователь переходит на новую страницу, весь javascript будет сброшен. Чтобы преодолеть это, вы можете сделать одно из двух:
1) Если вы используете главную страницу для меню, добавьте атрибут runat="server" к своим элементам списка, а из кода позади добавьте выбранный класс к соответствующему элементу списка со своей дочерней страницы (возможно, у вас может быть публичная функция на главной странице)
//Master page
public SetHomeMenu()
{
liHome.Attributes.Add("class","selected");
}
//in Child page
Master.SetHomeMenu();
2) Если вы хотите сделать это в javascript, вам нужно прочитать ваш URL, разобрать его, а затем добавить selected класс к соответствующему li
//put this javascript in your head section or even at the bottom, just before closing
// body tag </body>
$(document).ready(function () {
if(window.location.href.indexOf("home"))
{
$("#navigation li#home").addClass("selected");
}
else if(window.location.href.indexOf("about"))
{
$("#navigation li#about").addClass("selected");
}
else if(window.location.href.indexOf("contact"))
{
$("#navigation li#contact").addClass("selected");
}
});
Но чтобы это работало, вам нужно добавить атрибуты id в элементы списка, например:
<ul id="navigation">
<li id="home"><a href="#"><span>HOME</span></a></li>
<li id="about"><a href="/en-us/about.aspx"><span>ABOUT</span></a></li>
<li id="contact"><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li>
</ul>
Для использования последнего решения вам нужно изменить оператор if на этот пример:
if (window.location.href.indexOf ("home")> -1)