代码

<!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" 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>展示：