JavaScript判断地址栏链接与导航栏链接是否一致并给导航添加class

根据判断地址栏网址与当前导航栏网址是否一致，如果一致添加样式

 

<ul class="daohang">
<li id="a0" class="li0">
<a href="/" onmouseover="Mea(0);">网站首页</a>
</li>
<li id="a1" class="li1">
<a href="/product.html" onmouseover="Mea(1);">产品中心</a>
</li>
<li id="a2" class="li0">
<a href="/news-center.html" onmouseover="Mea(2);">新闻中心</a>
</li>
<li id="a3" class="li0">
<a href="/case/" onmouseover="Mea(3);">客户案例</a>
</li>
<li id="a4" class="li0">
<a href="/q/" onmouseover="Mea(4);">产品问答</a>
</li>
<li id="a5" class="li0">
<a href="/company.html" onmouseover="Mea(5);">走进红星</a>
</li>
<li id="a6" class="li0">
<a href="/contact.html" onmouseover="Mea(7);">联系我们</a>
</li>
</ul>

 

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var path = window.location.pathname;  // pathname 为域名后的值   调取地址栏链接请用href
$('.daohang a').each(function(i,n){   //获取导航下的链接
if($(n).attr('href') == path)
{
$(this).parent().addClass('active');   //给当前链接的父元素 li添加class
}
});
</script>

另一种方式：

先看效果：即点击链接时，让链接的父分类显示，且刷新不变

<ul class="daohang">
<li class="sidebar-dropdown"><a class="cz-current-elem" href="#"><i class="glyphicon glyphicon-pencil" style="color: #337ab7;"></i><span>文章管理</span></a>
<div class="sidebar-submenu">
<ul>
<li><a class="cz-current-elem" href="<?php echo getset("siteurl");?>/article-add.php">添加文章</a>
</li>
<li><a href="<?php echo getset("siteurl");?>/article.php">文章列表</a>
</li>
<li><a href="<?php echo getset("siteurl");?>/category.php?type=article">文章分类</a>
</li>
<li><a href="<?php echo getset("siteurl");?>/category-add.php?type=article">添加分类</a>
</li>
</ul>
</div>
</li>
</ul>

因链接中有？号  category.php?type=article，使用 pathname 只能获取到 ？号前的链接，所以改用 herf

<script>
var path = window.location.href; //href获取的是完整的地址栏链接
$('.daohang a').each(function(i,n){   
if($(n).attr('href') == path)
{
$(this).closest('div').css('display','block');  //给当前链接的父div添加行间样式

}
});
</script>

<script>
var path = window.location.href;  //href获取的是完整的地址栏链接
$('.daohang a').each(function(i,n){   
if($(n).attr('href') == path)
{
$(this).closest('div').css('display','block'); //给当前链接的父div添加行间样式
$(this).css('color','#337ab7'); //给当前链接加字体颜色
$(this).closest('div').closest('li').children('a').children('i').css('color','#337ab7'); //给当前链接的父div的父li的子a的i元素加字体颜色

}
});
</script>