jquery选项卡切换

第一：html页面

<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">产品属性</li>
<li>产品尺码表</li>
<li>产品介绍</li>
</ul>
</div>
<div class="tab_box">
<ul>
<li>
产品属性产品属性产品属性产品属性产品属性产品属性产品属性产品属性产品属性产品属性产品属性产品属性</li>
<li class="hide">产品尺码表</li>
<li class="hide">产品介绍</li>
</ul>
</div>
</div>

第二：css文件

.tab{
margin:20px 0 0 10px;
}
.tab_menu {
float:left;
}
.tab_menu ul li{
float:left;
font-size:14px;
width:80px;
line-height:26px;
height:26px;
margin-right:2px;
text-align: center;
border:1px solid #D7D9D3;
border-bottom: 0px;
}
.selected{
background:#008000;
color:white;
}
.tab_box{
width:600px;
height:200px;
border:1px solid #D7D9D3;
float:left;
}
.hide{
display:none;
}

第三：js文件
$(function(){
//选项卡功能
var $li=$('div.tab_menu ul li');
$li.click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected');
var $index=$li.index(this);//索引当前的值
$('div.tab_box ul li').eq($index).show()
.siblings().hide();
});
});


引进jquery库
大概效果就有了