TA貢獻319條經(jīng)驗 獲得超234個贊
<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>要實現(xiàn)這個效果布局很重要，希望對你有幫助
舉報