失败添加基于URL的活动导航类

时间:2016-11-12 03:55:59

标签: javascript

我的博客上有一个基本的菜单结构,使用下面的代码。我已经尝试了每一个剪辑,并在这里做了一些类似的主题,但没有任何作用。 我想要做的就是基于url将活动类添加到导航菜单中。因此,网站上的访问者或用户知道他所在的网站或部分网站。 那么,有人可以简单地解释在javascript中添加的位置和方法吗?

菜单结构

<div id="navigation">
<div class="backer" style="position: relative;">
<div class="header-inner-wrap">
<div class="header section" id="header">
<div class="widget Header" data-version="1" id="Header1">
<h1><div id="header-inner">
<a href=""></a></div></h1>
</div></div>
</div>
<nav class="main-nav" itemscope="itemscope" role="navigation">
<ul class="menu">
<li><a href="">About</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Tips</a></li>
</ul>
</nav>
</div>
</div>

使用Javascript:

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

CSS:

.menu li .active{border-bottom:3px blue solid;}

提前致谢

1 个答案:

答案 0 :(得分:0)

您可能想要检查菜单类的选择器是否匹配:

$("menu li a").each(function(){

应该是

$(".menu li a").each(function(){

编辑:根据新信息,以下更改应解决您的问题。

改变
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

var pgurl = window.location.href;

你的病情的or部分是不必要的。所以从这个改变

$("menu li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })

到这个

$(".menu li a").each(function(){
      if($(this).attr("href") == pgurl){
          $(this).addClass("active");
      }
 });

除了解决您的直接问题之外,您应该努力正确学习javascript而不是复制和使用代码段,这样您就可以轻松分析代码并检测问题的原因。