siblings筛选同胞元素

最新推荐文章于 2021-06-18 11:11:58 发布

夏天的甲虫

最新推荐文章于 2021-06-18 11:11:58 发布

阅读量850

点赞数

分类专栏： javascript 文章标签： siblings js

本文链接：https://blog.csdn.net/u012076852/article/details/51425018

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

条件筛选的时候，被选中的元素都会添加一个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>