Добавление активного класса CSS в навигацию с помощью jQuery

Question

Привет, все. Я ищу простой ненавязчивый способ добавить class = "active" в меню неупорядоченного списка на основе каталога, в котором он находится. К сожалению, я не могу добавить собственный класс в тег body, поэтому я не могу Я не могу использовать чистый раствор CSS.

Может ли кто-нибудь указать мне хороший учебник - я смотрел, но не могу найти тот, который соответствует моим потребностям. Код выглядит следующим образом, мне просто нужно добавить класс, основанный на / directory / или / решение jquery было бы идеальным, так как я уже загружаю библиотеку jQuery.

<ul class="nav">
<li><a href="/index.html">Home</a></li>
<li><a href="/about/about.html">About Us</a></li>
<li><a href="/cv/submit-your-cv.html">Submit CV</a></li>
<li><a href="/vacancies/index.html">Vacancies</a></li>
<li><a href="/news/news.html">Company News</a></li>
<li><a href="/praise/praise.html">Praise</a></li>
<li class="nosep"><a href="/contact/contact.html">Contact Us</a></li>
</ul>

Answer 1

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

$(".nav li:has(a[href$='"+window.location.pathname+"'])").addClass("active");

Answer 2

Надеюсь, это поможет вам у концепции будет выход при изменении цвета на каждой конкретной странице

var wo = window.location.pathname;

jQuery ("ul.nav li a"). Each (function () { var thisvar = jQuery (это); var ifid = jQuery (this) .attr ("href");

if(ifid == wo){

         switch(ifid){
          case "/index.html":
            thisvar.css("color","#000000");
          break;
          case "/about/about.html":
           thisvar.css("color","#EE2E24");
          break;

}

} });

Если вам понравился этот пост, вы также можете посетить его на http://linesforme.blogspot.com

Answer 3

Вы можете посмотреть переменную window.location и установить id для каждого li-элемента. Тогда что-то вроде:

$("...").addClass("myCssClass");

Надеюсь, это поможет ...