TAB菜單操作
阿新 • • 發佈：2017-09-02
ctype () char .com -c utf-8 png siblings 結果
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>
運行結果：
TAB菜單操作