jQuery 之 篩選器（TAB菜單實例）
阿新 • • 發佈：2019-04-03
所有 color code 1.5 ces col ont func content 代碼
<!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菜單實例）