jquery实现可自动收缩的拉环网页选项卡代码

本文实例讲述了jquery实现可自动收缩的拉环网页选项卡代码。分享给大家供大家参考。具体如下：

这是一款可自动收缩的拉环选项卡网页代码，当把鼠标放在标签上的时候，标签所属的内容自动展开，鼠标移走或移到其它标签的时候，选项卡自动收缩隐藏起来，第二个选项卡伸展开来，动画效果挺流畅，不错的网页特效。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-隐藏-显示-tab-cha-nav-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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleTab选项卡，自动伸缩代码/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式类型=' text/CSS '正文，h1，div，ul，li { margin:0划水：0;}李{列表式：无；}.演示{ width :300 pxmargin :30 px auto位置：相对；}.演示Li { float : leftadding :0 15 pxcursor : pointer指针；高度：30 px线高：30 px}.d-bk{} .演示李。cur {底色： # F00颜色： # FFF；}.演示李d-bk{ border:1px固体# F00宽度宽度：300像素高度：150 px背景-color : # f1 f1；位置：绝对；left :0 top :30 pxcolor : # 333 display : none }/style脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).演示李' .悬停(function(){ $(this)).添加CLaSS(' cur ')；$(这个)。孩子们d-bk ').向下滑动()；}).mouseout(函数(){ $(')。演示李' .移除CLaSS(' cur ')；$(这个)。孩子们d-bk ').向上滑动()；})})))/脚本/head dyul=' demo ' Li div=' d-bk ' 111/div/Li bbbb div=' d-bk ' 222/div/Li cccc div=' d-bk ' 333/div/Li/ul/body/html希望本文所述对大家的jquery程序设计有所帮助。