jQuery 之 TAB切換菜單
阿新 • • 發佈：2019-04-04
ges ima -o inter class 兄弟標簽 play jquery char 代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.js"></script> <style> .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 10px; cursor: pointer; } .content{ min-height: 100px; border:2px solid #eeeeee; } .hide{ display: none; } .active{ background-color: #428bca; } </style> </head> <body> <div style="width: 700px;margin: 0 auto"> <div class="menu"> <div class="menu-item active" m="1">菜單一</div> <div class="menu-item" m="2">菜單二</div> <div class="menu-item" m="3">菜單三</div> </div> <div class="content"> <div c="1">內容一</div> <div class="hide" c="2">內容二</div> <div class="hide" c="3">內容三</div> </div> </div> <script> $(".menu-item").click(function () { //為當觸發的標簽添加active css $(this).addClass(‘active‘) //為當前觸發標簽的兄弟標簽刪除active css $(this).siblings().removeClass(‘active‘) //獲取當前標簽下m的屬性值 var target = $(this).attr(‘m‘) //根據當前標簽獲取的m值，在內容標下的所有孩子標簽下查找c=target的標簽 //然後刪除hide css ，並為其它兄弟標簽添加hide css $(‘.content‘).children("[c=‘"+target+"‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘) }) </script> </body> </html>
展示：
jQuery 之 TAB切換菜單