无法使用添加标题活动链接

时间:2018-08-19 04:08:07

标签: jquery css html5 bootstrap-4

在jquery中,我无法读取标题活动链接中的属性'split'。我在下面添加了代码段。请有人帮我找出问题并解决。

这是我的摘录:

$(document).ready(function() {
  var url = $(location).attr('href');
  var parts = url.split("/");
  var last_part = parts[parts.length - 1];
  $("li").each(function() {
    var link = $(this).find("a").attr('href');
    var parts = link.split("/");

    if (last_part == parts[parts.length - 1]) {
      $(this).addClass('active');
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <nav id="main-menu" class="navbar navbar-default  navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
        <a class="navbar-brand" href="/index"><img src="/resources/images/logo.png" alt="logo"></img>
        </a>
        <span class="" style="margin-left:10px;font-weight:bold;text-align:center;margin-top:18px;text-transform:uppercase;cursor:pointer"> </span>
      </div>
      <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav" style="text-transform:uppercase; font-size:14px; font-weight:600">
          <li class="scroll"><a href="/views/index.jsp">Home</a></li>
          <li class="scroll"><a href="/views/features.jsp">Features</a></li>
          <li class="scroll"><a href="/views/services.jsp">Services</a></li>
          <li class="scroll"><a href="/views/pricing.jsp">Pricing</a></li>
          <li class="scroll"><a href="/blog/blog?page=1">Blog</a></li>
          <li class="scroll"><a href="/views/contact.jsp">Contact</a></li>
          </a>
          </li>
        </ul>
      </div>
    </div>
    </div>
  </nav>
</header>

仍然不知道可能是什么问题

1 个答案:

答案 0 :(得分:0)

假设您使用的是jQuery 1.6或更高版本,则问题可能出在

var url = $(location).attr('href');
var parts = url.split("/");

location是具有href属性的对象;它不是DOM元素,并且没有href属性。来自jQuery API docs

  

属性和属性之间的差异在特定情况下可能很重要。在jQuery 1.6之前,.attr()方法在检索某些属性时有时会考虑属性值,这可能会导致行为不一致。从jQuery 1.6开始,.prop()方法提供了一种显式检索属性值的方法,而.attr()则检索属性。

您可以尝试

var parts = location.href.split("/");

或者,如果您真的想使用jQuery,

var parts = $(location).prop("href").split("/");