http://www.xianlaiwan.cn/view/176

果然這門課最適合你

下面放若干個 div，使用絕對定位疊起來，鼠標經過哪個，就使下面對應的 div ?display：block，其他的均 display:none。

望采納！

$("div").hover(function(){ ?

? ? //顯示內容

},function(){

? ? //隱藏內容

})

<style>
????.nav?{?list-style:none;?border-bottom:1px?solid?#ccc;?height:28px;}
????.nav?li?{?width:96px;?border:1px?solid?#ccc;?float:left;?cursor:pointer;
??????????????????text-align:center;line-height:27px;}
????.nav?li.on?{?color:#ff5000;broder-bottom:2px?solid?#fff;}
????.content?div?{border:1px?solid?#ccc;?border-top:none;}
????.hide?{display:none}
</style>
<div?class="wrap">
????<ul?class="nav">
	<li?class="on">男裝</li>
	<li>女裝</li>
	<li>箱包</li>
????</ul>
????<div?class="content">
????????<div>這里是男裝</div>
????????<div?class="hide">這里是女裝</div>
????????<div?class="hide">這里是箱包</div>
????</div>
</div>

<script>
????$(".nav?li").mouseover(function(){
????????var?index?=?$(this).index();
????????$(this).addClass("on").siblings().removeClass("on");
????????$(".c_content?div:eq("+index+")").removeClass("hide").siblings().addClass("hide");
????})
</script>

要實現這個效果布局很重要，希望對你有幫助

可以使用show(),hide() 方法，通過獲取鼠標經過那個元素的下標來顯示對應的內容！

布局寫好 然后用js動態加載就好了