jquery简单实现带渐显效果的选项卡菜单代码

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码。分享给大家供大家参考。具体如下：

带渐显效果的选项卡菜单，使用了jQuery共同完成的效果，鼠标点击选项卡之后，出现渐变（淡入淡出效果),让网页看上去更生动。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/

具体代码如下：

！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 '标题带渐显效果的选项卡菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 ' style type=' text/CSS ' body { background : # f0f 0；保证金： 0；padd : 0；font: 10px正常Helvetica，阿里亚尔，无衬线；color : # 444 } h1 { font-size : 3em；边距： 20px 0；}.容器{ width : 500 pxmargin : 10px自动；} ul。制表符{边距： 0；padd : 0；向左浮动：列表样式：无；高度： 32px border-底部： 1px实心# 999;边框-左侧： 1px实心# 999;宽度： 100%;} ul.tabs li {左侧浮动：保证金： 0；padd : 0；高度： 31px线高： 31pxborder: 1px固体# 999;边框-左侧：无；保证金-底部：-1px；背景# e0e0e0飞越：隐藏；相对位置：} ul.tabs阿利{ text-摆设：无；color: # 000display:块；font-size : 1.2 empadding: 0 20pxborder: 1px实心# fffoutline:无；} ul。tab阿利：悬停{背景： # CCC} html ul。tab李。活动的，html ul。tab李。激活a :悬停{背景： # fff边框-底部： 1px实心# fff}。tab _ container { border : 1px solid # 999；边框-顶部：无；clear:两者；向左浮动：宽度： 100%;背景# fff-moz-border-radius-右下角： 5px-khtml-边框-半径-底部右侧5px-web套件-边框-底部-右侧-半径： 5px-moz-border-radius-左下角： 5px-khtml-边框-半径-左下角5px-web套件-边框-底部-左侧-半径： 5px}.tab _ content { padd : 20pxfont-size : 1.2 em；}.tab _ content H2 { font-weight :正常；填充-底部： 10px边框-底部： 1px虚线# DDD font-size : 1.8 em；}.tab _ content H3 a { color : # 254588；}.tab _ content img { float : left margin : 0 20px 20px 0 border : 1px固体# dddpadding: 5px}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪(函数(){//默认操作$(').tab _ content’).hide()；//隐藏所有内容$(' ul。tab李：第一个').addClass('active ').show()；//激活第一个标签$()。tab_content:first ').show()；//显示第一个标签内容//点击事件$(' ul。tab Li’).单击(function(){ $(' ul。tab Li’).移除CLaSS(' active ')；//删除任何"活动"类$(这个)。添加CLaSS(' active ')；//将"活动"类添加到选定的选项卡$()。tab _ content’).hide()；//隐藏所有选项卡内容var activeTab=$(此处)。查找(' a ').attr(' href ')；//查找能量损耗率属性值以标识活动选项卡内容$(活动选项卡)。fadeIn()；//淡入活动内容返回false })；});/script/head dydiv class=' container ' ul class=' tab ' Li class=' active ' a href=' # tab 1 ' tab 1/a/Li lia href=' # tab 2 ' id=' # tab 2/a/Li lia href=' # tab 3 ' tab 3/a/Li lia href=' # tab 4 ' tab 4/a/Li/ul div class=' tab _ container ' div id=' tab 1 ' class=' tab _ content ' style=' display : block；111111111111111111111/div div id=' tab 2 ' class=' tab _ content ' style=' display : none；222222222222222222/div div id=' tab 3 ' class=' tab _ content ' style=' display : none；333333333333333/div div id=' tab 4 ' class=' tab _ content ' style=' display : none；444444444444444/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。