jQuery 之篩選器（TAB菜單實例）

發(fā)布時間：2020-07-25 11:27:27 來源：網(wǎng)絡(luò) 閱讀：297 作者：wx592bc92b285c7 欄目：web開發(fā)

代碼

<!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">內(nèi)容一</div>
            <div class="content hide">內(nèi)容一1</div>
        </div>
        <div class="item">
            <div class="header">標題二</div>
            <div class="content hide">內(nèi)容二</div>
            <div class="content hide">內(nèi)容二</div>
        </div>
        <div class="item">
            <div class="header">標題三</div>
            <div class="content hide">內(nèi)容三</div>
            <div class="content hide">內(nèi)容三</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>

展示

向AI問一下細節(jié)

jQuery 之 篩選器（TAB菜單實例）

代碼

展示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

jQuery 之篩選器（TAB菜單實例）