问题描述

求助js实现导航菜单点击切换

ul class="nav navbar-nav" id=“ulid”
li class="active"> a href="。。。。。">导航1/a/li
li a href="。。。。。">导航2/a /li
li a href="。。。。。">导航3/a /li
li a href="。。。。。">导航4/a /li
/ul

       jS如何实现根据当前页面url 给当前a标签所在的li 添加一个class 属性，请清理同级别其他的li的class属性！

解决方案

 $("#ulid li").removeClass("active");
$("#某个特定的li").addClass("active");

解决方案二：

 $("#ulid li").each(function(){ if ($this().first("a").attr("href") == "xxx") xxx });

解决方案三：

这是在本地的测试，用JS写的，JQ原理也一样。

 <style>
.active a{color:red;}
</style>
<ul class='nav navbar-nav' id='ulid'>
    <li class='active'> <a href="">导航1</a></li>
    <li> <a href="file:///C:/Users/Administrator/Desktop/test.html">导航2</a> </li>
    <li> <a href="http://www.baidu.com">导航3</a> </li>
    <li> <a href="http://www.csdn.net">导航4</a> </li>
</ul>

<script type='text/javascript'>
var a = document.getElementsByTagName('a'),
url = window.location.href;
for(i=0;i<a.length;i++){
    a[i].parentNode.className='';
    if(a[i].getAttribute('href').match(url))a[i].parentNode.className='active';
}
</script>

解决方案四：

demo：网站导航栏目焦点设置

解决方案五：

用js实现导航菜单点击切换选中时高亮状态
js实现简单导航切换
JS + CSS 实现导航下拉菜单