siblings筛选同胞元素

来源：互联网发布：办公软件技巧大全编辑：程序博客网时间：2024/05/18 02:02

条件筛选的时候，被选中的元素都会添加一个active样式！

当有多个筛选分类时，点击当前筛选分类时，其他筛选分类的active样式不改变，而被点击的当前分类先移除子元素的active样式，再给被点击元素添加active样式

<!DOCTYPE html><html><head>  <meta charset="utf-8">   <title>siblings筛选同胞元素</title>  <script type="text/javascript" src="js/jquery.js"></script>  <style type="text/css">    .list{      color: #cccccc;      margin: 10px 0 0 0;      clear: both;      height: 20px;      line-height: 20px;    }    .list li{      float: left;      list-style: none;      margin-left: 40px;      cursor: pointer;    }    .list .active{      color: red;    }  </style></head><body>  <h3></h3>  <ul class="list">    <li class="active">点击</li>    <li>点击</li>    <li>点击</li>  </ul>  <ul class="list">    <li class="active">点击</li>    <li>点击</li>    <li>点击</li>  </ul>  <ul class="list">    <li class="active">点击</li>    <li>点击</li>    <li>点击</li>  </ul>  <script type="text/javascript">    $(".list li").click(function(){      $(this).addClass("active").siblings().removeClass("active");    })  </script></body></html>

0 0