代码

<!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 > <div class="menu"> <div class="menu-item active">菜单一</div> <div class="menu-item">菜单二</div> <div class="menu-item">菜单三</div> </div> <div class="content"> <div>内容一</div> <div class="hide">内容二</div> <div class="hide">内容三</div> </div> </div> <script> $(".menu-item").click(function () { //为当触发的标签添加active css $(this).addClass('active') //为当前触发标签的兄弟标签删除active css $(this).siblings().removeClass('active') //找到当前触发标签的索引位置值，如0，1，2 var v = $(this).index(); //根据标签索引位置值在内容菜单里查找位置也是等于v的标签，然后删除hide，再把兄弟标签添加hide $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide') }) </script></body></html>展示