标签：inter target pad script 菜单 ges function es2017 item
1，TAB菜单操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.menu{
height:38px;
background-color:#eeeeee;
line-height:38px;
}
.active{
background-color:brown;
}
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 5px;
cursor:pointer;
}
.content{
min-height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.menu-item‘).click(function(){
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
var target=$(this).attr(‘a‘);
$(‘.content‘).children("[b=‘"+target+"‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘);
});
</script>
</body>
</html>
运行结果：
标签：inter target pad script 菜单 ges function es2017 item
原文地址：http://www.cnblogs.com/momo8238/p/7467319.html
