Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-23 17:12:28

qq选项卡网页选项卡代码滑动门选项卡代码滑动门代码

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <style type="text/css">
ul li { list-style: none; }
ul, li { margin: 0; padding: 0;}
.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}
.tabs_act{font-weight:bold;color:#FC7404;border-bottom:1px solid #fff; background-image:url(../images/bj.gif)}
.Sliding_tab{width:513px;border-left:1px solid #ccc;height:27px;}
.Sliding_tab li{float:left;border-top:1px solid #ccc;}
.Sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}
.tablist { clear:both; width:513px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}
</style>
<SCRIPT language=javascript type=text/javascript>
function g(o){return document.getElementById(o);}
function Hovertab(num,counts,tabname,tabclass){
for (i=1;i<=counts;i++)
{
g(tabname+'tab0'+i).className=tabclass+'tabs';
g(tabname+'div0'+i).style.display='none';
}
g(tabname+'tab0'+num).className=tabclass+'tabs_act';
g(tabname+'div0'+num).style.display='block';
}
</SCRIPT>
<title>hover选项卡js特效代码</title></HEAD>
<BODY>
<div style=" width:513px; float:left; clear:both;">
<DIV class="Sliding_tab">
<UL>
<LI><A class=tabs_act id=set_tab01 onMouseOver="Hovertab('1','2','set_','');" href="#">选项卡一</A></LI>
<LI><A class=tabs id=set_tab02 onMouseOver="Hovertab('2','2','set_','');" href="#">选项卡二</A> </LI>
<LI class="table_li"></LI>
</UL>
</DIV>
<DIV class=tablist id=set_div01>选项卡一 内容</DIV>
<DIV class=tablist id=set_div02 style="DISPLAY: none">选项卡二 内容</DIV>
</div>
</BODY>
</HTML>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： js信息循环滚动提示特效代码

下一篇文章： JS不间断向上滚动特效代码

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

hover选项卡js特效代码

推荐阅读：

相关代码：

标签分类