Xhtml Code:
<div id="divleft">
<a href="#">链接一</a>左侧的链接
<a href="#">链接二</a>
</div>
<div id="divright">
<div>内容一</div> 右侧出现的内容
<div>内容二</div>
</div>
jQuery Code:
$('#divright div').hide()
$('#divleft a').each(function(i){
$(this).click((function(k){
return function(){
var int = k
$('#divright div').hide()
$('#divright').find('div').eq(int).show()
}
})(i))
})
Css Code:
#divleft{ background:#dddfloat:leftheight:100pxpadding:10pxwidth:80px}
#divleft a{ color:#000display:block}
#divright{ background:#eeefloat:leftheight:100pxpadding:10pxwidth:300px}
附效果图一张：
希望对你能有所帮助。
你的需求是这样么？你只要控制一下父级和子级的包含关系就可以实现了：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
hr{margin: 10px 0 10px 0 }
li {
list-style: none
}
.nav {
height: 35px
position: relative
}
.bar{
position: absolute
right: 0
}
.bar ul li {
float: left
background: #3695D5
width: 50px
height: 35px
line-height: 35px
text-align: center
}
.box{border: 1px solid #000000}
</style>
<body>
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="box">
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
<hr>
<div class="box">
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
</body>
</html>
