jQuery写淡入淡出的选项卡TAB菜单

代码简介：

淡入淡出的Tab选项卡菜单，基于jQuery1.3.2类库，当用鼠标点击某个选项卡的时候，对应的内容渐渐出现，有种缓冲的感觉，这样人的眼睛更容易接受，可有效提升网站用户体验，也为网站增加一点动感元素。

代码内容：

View Code

<! 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

 

转载于:https://www.cnblogs.com/webdm/archive/2011/07/27/2117975.html