请大家帮忙看看选项卡怎么才能切换?

luyuwei2008 2013-03-14 05:46:46
请大家帮忙看看选项卡怎么才能切换?切换时选项卡背景怎么变色,请大家帮忙修改代码,多谢!
CSS代码
/*产品选项卡标题*/
#product_pic_list1,#product_pic_list2,#product_pic_list3,#product_pic_list4{
cursor:pointer;
border-left:1px solid gray;
border-top:1px solid gray;
border-bottom:1px solid gray;
float:left;
width:90px;
height:30px;
font-size:14px;
text-align:center;
background:silver;
}


/*产品选项卡内容层*/
#con_product_pic_list_1{
display:block;
cursor:default;
clear:both;
border:1px solid red;
height:175px;
background:#FFFFFF;
}

#con_product_pic_list_2,#con_product_pic_list_3,#con_product_pic_list_4
{
display:none;
cursor:default;
clear:both;
border:1px solid red;
height:175px;
left:0px;
background:#FFFFFF;
}

html文件
<script language="javascript">
function ssetTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"productpicturelist":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>

<div id="productInfomation">
<div class="PIDiv">
<!--选项卡标题开始-->
<div id="product_pic_list1" class=productpicturelist onMouseMove="ssetTab('product_pic_list',1,4)"><b><li>选项卡一</li></b></div>
<div id="product_pic_list2" class=productpicturelist onMouseMove="ssetTab('product_pic_list',2,4)"><b><li>选项卡二</li></b></div>
<div id="product_pic_list3" class=productpicturelist onMouseMove="ssetTab('product_pic_list',3,4)"><b><li>选项卡三</li></b></div>
<div id="product_pic_list4" class=productpicturelist onMouseMove="ssetTab('product_pic_list',4,4)" style="border-right:1px solid gray;"><b><li>选项卡四<li></b></div>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div id="con_product_pic_list_1" style="display:block;cursor:default; clear:both; ">这里是选项卡一一一的内容

</div>
<div id="con_product_pic_list_2" style="display:none; cursor:default; clear:both; ">这里是选项卡二二二的内容

</div>
<div id="con_product_pic_list_3" style="display:none; cursor:default; clear:both; ">这里是选项卡三三三的内容

</div>
<div id="con_product_pic_list_4" style="display:none; cursor:default; clear:both; ">这里是选项卡四四四的内容

</div>
<!--选项卡内容结束-->
</div>
</div>
...全文
82 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,991

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧