<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左边垂直菜单按钮,右边div内容显示-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
dt,dt:hover {
text-decoration:none;
color:black
}
dt.li-active:hover {
color:white;
}
.leftMenu {
width:100%;
list-style:none;
text-align:center;
margin-top:0px;
}
.leftMenu dt {
border-bottom:1px solid #ddd;
line-height:50px;
font-size:15px;
}
.leftMenu dt:hover {
background-color: #a6e1ec;
}
.li-active {
background-color: #c89b09;
box-shadow:2px 0px 0px #EFEFEF;
border-right:none;
color:#fff;
padding:0
}
.leftDiv {
float:left;
width:19%;
height:auto;
min-height:500px;
min-width:100px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.rightDiv {
float:left;
height:auto;
width:80%;
min-width:800px;
min-height:500px;
margin:0 auto;
padding-left:5px;
}
.tab {
width:100%;
min-width:800px;
height:auto;
min-height:500px;
display:none
}
.tab-active {
display:block
}
.myContent {
width:100%;
height:auto;
min-width:1000px;
min-height:500px;
border:1px solid #eee;
}
</style>
</head>
<body>
<div class="myContent">
<div class="leftDiv">
<dl class="leftMenu">
<dt class="li-active">menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
<dt>menu4</dt>
</dl>
</div>
<div class="rightDiv">
<div class="tab tab-active">
tab1
</div>
<div class="tab">
tab2
</div>
<div class="tab">
tab3
</div>
<div class="tab">
tab4
</div>
</div>
</div>
<script>
$(function() {
$(".leftMenu dt").click(function() {
var $this = this;
$($('.leftMenu dt')).each(function(i, el) {
var tab = $('.rightDiv .tab').eq(i);
if ($this == el) {
$($this).addClass('li-active');
tab.addClass('tab-active');
} else {
$(el).removeClass('li-active');
tab.removeClass('tab-active');
}
})
});
});
</script>
</body>
</html>
地图
最新推荐文章于 2024-07-20 14:29:31 发布