Добавить активный класс в 'home' link

Я использую jQuery для добавления класса active к элементам на главном навигаторе. Однако я не могу получить href с домашней страницы, чтобы применить к ней класс active.Добавить активный класс в 'home' link

Это то, что я уже пробовал:

<ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
    <li><a href="/">Home</a></li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="contact.html">Contact us</a></li> 
</ul>

JQuery

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $("#mainNavbar li a").each(function(){ 
    if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
     $(this).addClass("active"); 
    }) 
});

Что я здесь отсутствует?

источник

2016-06-28 brunodd

Вы пытались отладить 'pgurl', чтобы узнать, что он содержит? – j08691

Это работает для меня, вы импортировали jquery? – gnllucena

Его работа для меня в надуманном примере: https://jsfiddle.net/x9kLbgj4/1/ Можете ли вы представить пример ввода и ожидаемого фактического вывода – dan08

Я создал файл teste.html, и это отлично работает для меня.

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 

      $("#mainNavbar li a").each(function(){ 
       if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
        $(this).addClass("active"); 
      }) 
     }); 
    </script> 
</head> 
<body> 
    <ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
     <li> 
      <a href="/">Home</a> 
     </li> 
     <li> 
      <a href="teste.html">Services</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact us</a> 
     </li> 
    </ul> 
</body> 
</html>

источник

2016-06-28 16:35:48 gnllucena

Попробуйте

заменить эту строку

$(this).attr('class','active'); // add this line

Jquery

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $("#mainNavbar li a").each(function(){ 
    if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
     $(this).attr('class','active'); // add this line 
    }) 
});

источник

2016-06-28 16:38:06

почему вы не используете ставить active класс по HTML тег в вашей HTML странице так:

<ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
    <li> 
     <a href="/" class="active">Home</a> 
    </li> 
    <li> 
     <a href="teste.html">Services</a> 
    </li> 
    <li> 
     <a href="contact.html">Contact us</a> 
    </li> 
</ul>

и на вашей странице контактов add active class on <a> link как этот <a href="contact.html" class="active"> и так далее.

источник

2016-06-28 16:41:42

Добавить активный класс в 'home' link

ответ

Смежные вопросы