js实现tab切换效果实例_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:43:41

js实现tab切换效果实例_javascript技巧

js实现tab切换效果实例_javascript技巧:直接先来个真相吧：【HTML代码】 tab1 tab2 tab3 这是TAB切换效果区域1 这是TAB切换效果区域2 这是TAB切换效果区域3 【js】 /** * tabs * @author 橡树小屋 */ var tabs=function(){ function

推荐度：

点击下载本文 文档为doc格式

导读js实现tab切换效果实例_javascript技巧:直接先来个真相吧：【HTML代码】 tab1 tab2 tab3 这是TAB切换效果区域1 这是TAB切换效果区域2 这是TAB切换效果区域3 【js】 /** * tabs * @author 橡树小屋 */ var tabs=function(){ function

直接先来个真相吧：

【HTML代码】



 
 tab1
 tab2
 tab3
 
 

 
 
 这是TAB切换效果区域1
 
 
 这是TAB切换效果区域2 
 
 
 这是TAB切换效果区域3

【js】

【CSS】

body{ background:#FFF;}
a{color:#585858}
#menu{width:360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;
 background:url(../images/bg.gif)}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}
 
/*-------------------列表标题样式----------------------*/
#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}

调用方法：

tabs.set("nav","menu_con");

代码下载点击这里

这个实例只是简单实现了点击切换的效果，还有许多功能可以添加，大家一起动手实践一下吧。