实用案例：切换面板同时切换内容

1     function change(Obj){ //改变菜单，改变内容 pub

2 $(".mallmenu li a").removeClass("onmallmenu");

3 $(Obj).addClass("onmallmenu");

4 

5     var changeid = $(Obj).attr("changeid");

6     $("#"+changeid).siblings(".m").hide().end().show();

7 }

1 <div class="mallmenu">

2         <ul>

3         <li><a onClick="change(this);" changeid="fxsm" class="onmallmenu">介绍</a></li>

4     <li><a onClick="change(this);" changeid="scjs">商城</a></li>

5     <li><a onClick="change(this);" changeid="cxyh">优惠</a></li>

6     </ul>    </div>

1 <div class="malldesc m" id="fxsm">层一</div>

2 <div class="malldesc m" id="scjs">层二</div>

3 <div class="malldesc m" id="cxyh">层三</div>

 

<style>
.mallmenu{ width:708px; height:33px;}
.mallmenu ul li{ width:139px; height:33px;float:left;}
.onmallmenu{ font-weight:bold; color:red;}
.malldesc{min-height:200px; border:1px solid #E6E6E6; display:none;}
</style>

 效果如图：