JQuery изменить класс ссылки CSS

Question

У меня есть следующее главное меню:

<div id="smoothmenu" class="ddsmoothmenu"> 
    <ul id="nav"> 
     <li><a href="/Home">Home</a></li> 
     <li><a href="/About">About</a> </li> 
     <li><a href="/Features">Features</a></li> 
     <li><a href="/Contact">Contact</a></li> 
     <li><a href="/Support">Support</a></li> 
    </ul> 
</div> 

Я хотел бы добавить класс CSS «выбранный» в ссылку, когда нажата ссылка и удалить класс CSS от всех остальных звеньев в . Это нужно отметить страницу, которую пользователь нажал, чтобы открыть.

Возможно, это может быть сделано способом, когда jquery считывает текущий путь при загрузке страницы и добавляет класс css в соответствующий тег ссылки на меню?

Спасибо

Answer 1

CSS-Tricks Snippet

Допустим, у вас есть навигация, как это:

<nav> 
    <ul> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a></li> 
     <li><a href="/clients/">Clients</a></li> 
     <li><a href="/contact/">Contact Us</a></li> 
    </ul> 
</nav> 

И вы в URL:

http://yoursite.com/about/team/

И вы хотите, о ссылке, чтобы получить класс «активных», так что вы можете визуально указать это активная навигация

$(function() { 
    $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
}); 

По существу, которые будут соответствовать ссылки нав кто есть HREF атрибута начинается с «/ о» (или независимо от того, какой второй каталог окажется).

Further reading...

Answer 2

Попробуйте

$('div#smoothmenu').on('click', 'a', function(e){ 
    $(this).addClass('Selected').siblings('a').removeClass('Selected'); 
}); 

Answer 3

Немного поздно к партии, но попробовать это для размера ...

Он сравнивает HREF атрибута каждого элемента анкера в текущем окне местоположение для вашей структуры навигации, приведенное выше.

$('.ddsmoothmenu > ul#nav > li').each(function() { 
    var $this = $(this), 
     $link = $this.children('a'), 
     path = $link.attr('href'); 

    if (path == document.location.pathname) { 
     $this.addClass('selected'); 
    } 
}); 

Можно увидеть в действии на JSFiddle: http://jsfiddle.net/LdQft/