代码简介:
淡入淡出的Tab选项卡菜单,基于jQuery1.3.2类库,当用鼠标点击某个选项卡的时候,对应的内容渐渐出现,有种缓冲的感觉,这样人的眼睛更容易接受,可有效提升网站用户体验,也为网站增加一点动感元素。
代码内容:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > jQuery写淡入淡出的选项卡TAB菜单_网页代码站(www.webdm.cn) </ title >
< style type = " text/css " >
ul,li{margin: 0 ;padding: 0 ;list - style:none;}
#tabfirst li{ float :left;background - color:# 868686 ;color:white;padding:5px;margin - right:2px;border:1px solid white;}
#tabfirst li.tabin{background - color:#6E6E6E;border:1px solid #6E6E6E;}
.contentfirst{clear:left;background - color:#6E6E6E;color:white;width:300px;height:100px;padding:10px;display:none;}
.contentin{display:block;}
</ style >
< script type = " text/javascript " src = " http://www.webdm.cn/themes/script/jquery.js " ></ script >
< script type = " text/javascript " >
$(function(){
var _tab = $( ' ul#tabfirst>li ' );
var _con = $( ' div#tab_box>div ' );
var _conthis;
var _index = 0 ;
_tab.click(function(){
_index = _tab.index( this );
$( this ).addClass( ' tabin ' ).siblings().removeClass( ' tabin ' );
_con.filter( ' :visible ' ).stop( true , true ).fadeOut( 200 ,function(){
_con.eq(_index).fadeIn( 200 )
})
});
})
</ script >
</ head >
< body >
< ul id = " tabfirst " >
< li class = " tabin " > 选项卡1 </ li >
< li > 选项卡2 </ li >
< li > 选项卡3 </ li >
</ ul >
< div id = " tab_box " >
< div class = " contentin contentfirst " > 选项卡1的内容 </ div >
< div class = " contentfirst " > 选项卡2的内容 </ div >
< div class = " contentfirst " > 选项卡3的内容 </ div >
</ div >
< br > 初次打开,如果左下角出现错误提示,请刷新一下页面就正常了,正常使用时不会出现此现象。
< br />
< p >< a href = " http://www.webdm.cn " > 网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码! </ p >
</ body >
</ html >
代码来自:http: // www.webdm.cn/webcode/896bada3-581e-4de0-8dca-940b38e1ae96.html
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > jQuery写淡入淡出的选项卡TAB菜单_网页代码站(www.webdm.cn) </ title >
< style type = " text/css " >
ul,li{margin: 0 ;padding: 0 ;list - style:none;}
#tabfirst li{ float :left;background - color:# 868686 ;color:white;padding:5px;margin - right:2px;border:1px solid white;}
#tabfirst li.tabin{background - color:#6E6E6E;border:1px solid #6E6E6E;}
.contentfirst{clear:left;background - color:#6E6E6E;color:white;width:300px;height:100px;padding:10px;display:none;}
.contentin{display:block;}
</ style >
< script type = " text/javascript " src = " http://www.webdm.cn/themes/script/jquery.js " ></ script >
< script type = " text/javascript " >
$(function(){
var _tab = $( ' ul#tabfirst>li ' );
var _con = $( ' div#tab_box>div ' );
var _conthis;
var _index = 0 ;
_tab.click(function(){
_index = _tab.index( this );
$( this ).addClass( ' tabin ' ).siblings().removeClass( ' tabin ' );
_con.filter( ' :visible ' ).stop( true , true ).fadeOut( 200 ,function(){
_con.eq(_index).fadeIn( 200 )
})
});
})
</ script >
</ head >
< body >
< ul id = " tabfirst " >
< li class = " tabin " > 选项卡1 </ li >
< li > 选项卡2 </ li >
< li > 选项卡3 </ li >
</ ul >
< div id = " tab_box " >
< div class = " contentin contentfirst " > 选项卡1的内容 </ div >
< div class = " contentfirst " > 选项卡2的内容 </ div >
< div class = " contentfirst " > 选项卡3的内容 </ div >
</ div >
< br > 初次打开,如果左下角出现错误提示,请刷新一下页面就正常了,正常使用时不会出现此现象。
< br />
< p >< a href = " http://www.webdm.cn " > 网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码! </ p >
</ body >
</ html >
代码来自:http: // www.webdm.cn/webcode/896bada3-581e-4de0-8dca-940b38e1ae96.html