2 qq 32629561 qq_32629561 于 2016.04.26 22:00 提问

求助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属性!

5个回答

caozhy
caozhy   Ds   Rxr 2016.04.26 22:14
 $("#ulid li").removeClass("active");
$("#某个特定的li").addClass("active");
qq_32629561
qq_32629561 回复caozhy: 应该是需要当前页面url 和li里a标签href属性进行对比,求助怎么写啊 。。。。
一年多之前 回复
caozhy
caozhy 回复qq_32629561: 你总得有个判断的标准,比如根据href判断,根据顺序判断,或者给每个li也加上id
一年多之前 回复
qq_32629561
qq_32629561 这我也知道啊,具体JS怎么写啊,怎么获取这个特定li
一年多之前 回复
caozhy
caozhy   Ds   Rxr 2016.04.26 22:29
 $("#ulid li").each(function(){ if ($this().first("a").attr("href") == "xxx") xxx });
caozhy
caozhy 回复qq_32629561: 把你的html贴出来
一年多之前 回复
qq_32629561
qq_32629561 跪求明天有完整的JS代码
一年多之前 回复
qq_32629561
qq_32629561 $(this) 获取到了li
一年多之前 回复
qq_32629561
qq_32629561 获取A标签 都没获取到
一年多之前 回复
caozhy
caozhy 回复qq_32629561: 不会啊,你先用alert输出下看看呢
一年多之前 回复
qq_32629561
qq_32629561 $(this).first("a").attr("href") 获取不到 a标签的 href
一年多之前 回复
perhapschen
perhapschen   2016.04.27 00:11

这是在本地的测试,用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>
showbo
showbo   Ds   Rxr 2016.04.27 11:20
CSDNXIAOD
CSDNXIAOD   2016.04.26 22:12

用js实现导航菜单点击切换选中时高亮状态
js实现简单导航切换
JS + CSS 实现导航下拉菜单
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

qq_32629561
qq_32629561 应该是需要当前页面url 和li里a标签href属性进行对比,求助怎么写啊 。。。。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!