简单的jquery tab切换代码

<style>
/* 产品中心切换样式 */
.left_div{width:689px;  overflow:hidden; float:left;  position:relative;}
.title{ position:absolute; left:15px; height:40px; line-height:40px; font-size:18px; z-index:100;color:#cf9100;}
.title span{font-size:12px; font-family:"Microsoft YaHei";color:#999; }
.product_div .tab2 .more{ height:53px; line-height:53px; margin-right:10px;}
.cpzx_div{width:700px;  overflow:hidden; float:left; background-color:#FFFFFF;}
/*.cpzx_title{ width:711px; height:53px; line-height:53px; font-size:16px; font-family:"Microsoft YaHei";color:#333; background:url(../images/gg_03.jpg) no-repeat left; }
.cpzx_title span{font-size:12px; font-family:"Microsoft YaHei";color:#999;}
.cpzx_title .more{ height:53px; line-height:53px;}
.cpzx_title .more a{ height:53px; line-height:53px;}*/
.product_div{width:700px; height:260px; border:1px solid #f1e7db;border-bottom:3px solid #f1e7db;}
.product_div .tab2{width:700px;height:auto; overflow:hidden;   }
.product_div .tab2 ul.menu2{ width:570px; height:40px; background:url("../images/uy.jpg") no-repeat;padding-left:130px; border-bottom:#CCCCCC solid 1px; }
.product_div .tab2 ul.menu2 li{width:70px; height:40px; line-height:40px; cursor: pointer; font-size:14px; font-family:"微软雅黑"; color:#333;cursor:pointer; float:left; text-align:center;}
.product_div .tab2 ul.menu2 li.active2{width:70px; height:40px; line-height:40px; color:#bb3a27;border:1px solid #f1e7db; background-color:#FFFFFF; border-bottom-color:#FFFFFF; }
.product_div .con1,.product_div #con2,.product_div .con3,.product_div .con4,.product_div .con5,.product_div .con6{ padding-top:10px; display:none; }
.product_div .shuju{ height:153px; width:500px;  margin:20px 7px; display:inline;}
.product_div .shuju img{ margin-top:30px;}
</style>
<div class="tab2" id="tab2">
<span class="title">延时行情图</span>

<ul class="menu2">
<li class="active2">现货白银</li>
<li class="">现货铜</li>
<li class="">现货铝</li>
<li class="">现货镍</li>
<li class="">现货钯金</li>
<li class="">现货铂金</li>
</ul>
<div class="con1" style="display: block;">
<div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/sliver1.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/sliver2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div></div>
<div class="con2"><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/cu1.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/cu2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div></div>
<div class="con3"><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/al1.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/al2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div></div>

<div class="con4"><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/ni1.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/ni2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div>
</div>

<div class="con5">
<div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/palladium1.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/palladium2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div></div>
<div class="con6">
<div class="shuju"><iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/platinum1.html" frameborder="0" width="330" scrolling="no"></iframe>
</div>
<div class="shuju">
<iframe id="sliver_left" height="220" src="http://www.tjpme.com/mydemo2/platinum2.html" frameborder="0" width="330" scrolling="no"></iframe></div><div class="clear"></div></div>

</div>

<script>
$('#tab2 ul.menu2 li').click(function(){
//获得当前被点击的元素索引值
var Index = $(this).index();
//给菜单添加选择样式
$(this).addClass('active2').siblings().removeClass('active2');
//显示对应的div
$('.tab2').children('div').eq(Index).show().siblings('div').hide();

});

</script>