jQuery 之筛选器（TAB菜单实例）

发布时间：2020-07-25 11:27:27 作者：wx592bc92b285c7
来源：网络阅读：294

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.js"></script>
    <style>
        .header{
            background-color: blue;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="item">
            <div class="header">标题一</div>
            <div class="content hide">内容一</div>
            <div class="content hide">内容一1</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容二</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容三</div>
            <div class="content hide">内容三</div>
        </div>
    </div>
    <script>
          $(".header").click(function () {
              //当前点击的标签$(this)
              //获取某个标签的下一个标签
              //获取某个标签的父标签
              //获取所有的兄弟标签
              //添加样式和移除样式
              //$('#i1').addClass('hide')
              //$('#i1').removeClass('hide')
              //筛选器
              // $(this).next()          下一个
              // $(this).prev()          上一个
              // $(this).parent()        父
              // $(this).children()      孩子
              // $(this).siblings()      兄弟
              // $(this).find('#i1')     子子孙孙中查找
              //另外一种删除hide属性
              // $(this).next().removeClass('hide');
              //  $(this).next().next().removeClass('hide');
              $(this).siblings().removeClass('hide')
              $(this).parent().siblings().find('.content').addClass('hide')
          })
    </script>
</body>
</html>

展示

jQuery 之 筛选器（TAB菜单实例）

代码

展示

相关阅读

jQuery 之筛选器（TAB菜单实例）