Question

我正在使用jQuery将active类添加到主导航中的项目。但是，我无法从主页获取href以便将active类应用于该网页。

这是我已经尝试过的：

<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");
  })
});

我在这里缺少什么？

Answer 1

我创建了一个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>

Answer 2

试试这个

替换此行

 $(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
  })
});

Answer 3

为什么你不使用在html页面的html标签上放置active类
像这样：

<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">等等。

将活动类添加到“主页”链接

3 个答案: