javascript - 选择一个标签,给选中的标签添加类样式,给同辈元素删除类样式
黄舟
黄舟 2017-06-12 09:20:42
0
3
852

单击一个标签,给他添加类样式,同时删除同辈元素类样式。

//单击事件,
$(".user-menu li a").click(function(){

//单击时,给他添加样式,同时遍历同辈元素删除该样式
//但是实现不了,是不是我的思路错了
$(this).addClass("active").siblings().removeClass("active");        

});

//标签,li标签里面有个a标签,初始只有收藏车辆有样式,,不知道为什么显示不出来
<ul class="user-menu">
<li>收藏车辆</li>
<li>降价提醒</li>
<li>浏览记录</li>
</ul>

未点击时

点击后 是想点击的标签添加演示,把原来标签的样式删除,只留一个样式

点击后 想实现的样子 未实现

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
Ty80

$(".user-menu li a").click(function(){

//先全部干掉
$(".user-menu li a").removeClass("active");    
//再给this加上
$(this).addClass("active");        

});
我一般是这么用的,同求更好方案;
补充:你的选择器选到的是li标签内部的a标签,然后找a标签的同辈元素,是找不到其他li标签下的a标签的。

曾经蜡笔没有小新

先遍历所有元素,然后给当前的加样式,其他的移除这个样式

大家讲道理

我的方案:

$('.user-menu li a').on('click.app', function(){
    // 自身加属性 - 同辈移属性
    $(this).addClass('active')
        .parent() // 退回到父级 li
        .siblings()
        .removeClass('active');
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!