jquery实现经典的淡入淡出选项卡效果代码

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款经典的标签选项卡代码，带有淡入淡出效果，jquery插件实现，希望大家能够喜欢，界面未做美化。感兴趣的朋友可以优化一下

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-JD-淡入淡出-样式-选项卡-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title经典选项卡/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式类型=' text/CSS ' .tab { text-align : left宽度宽度：500pxborder:#ccc 1px固体；margin:100px}。tab dt {边框-底部： # CCC 1px实心；高度：25px背景# f1f1f1保证金-底部：-1px；高度：25px线高：25 px}.tab dt strong { padd :0 15 pxcolor : # 444 }。tab dt a { display : inline-block；光标：指针指针；padding:0 10px文本对齐：居中；背景# f1f1f1color: # 000}。tab dt a . on { background : # fffcolor : # 333 font-weight : bold；边框-底部：1px实心# fffborder-right:1px实心# ccc边框-左侧：1px实心# ccc}。选项卡dd { padding:10px高度：200 pxclear : both }/style/head dyscript type=' text/JavaScript ' $(function(){ var tabbtitle=' .选项卡dl dt a '；var tabContent=' .制表符dl ul '；$(tabTitle ':first ').添加CLaSS(' on ')；$(标签内容).不是(' :first ').hide()；$(tabTitle).解除绑定("单击")。bind('click ')，function(){ $(this).兄弟姐妹(' a ').removeClass('on ').end().添加CLaSS(' on ')；var索引=$(tabTitle).索引($(this))；$(标签内容).eq(指数)。兄弟（标签内容)。隐藏()。end().fadeIn('慢');});});/script div class=' tab ' dl dtstrong经典选项卡/stronga手机卖场/aa我们/aa海澜男人/aa精品居家/a/dt DD ul 1111111111111111111111/ul ul 222222222222/ul ul ul 33333333333333333333333111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111希望本文所述对大家的jQuery程序设计有所帮助。