jQuery超简单选项卡完整实例

本文实例讲述了jQuery实现的超简单选项卡效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery的选项卡示例，比较实用的一个实例，希望通过本文让大家掌握如何使用jQuery创建一个选项卡标签，这是目前网前端设计比较流行的一款功能。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-demo/

具体代码如下：

！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' /titlejQuery选项卡实战/title style * { margin 33600；划水：0;字体系列： '宋体Helvetica阿里亚尔，无衬线字体；font-size:12px} .ts {宽度：50%；margin:0 auto} .ts .tsHead { clear:both高度：27 px背景： URL(图片/titline。gif)重复-x左下方；边框-左侧：1px实心# 88AAD6右边框：1px实心# 88AAD6边框-top:1px实心#88AAD6} .ts .titLeft { float:left高度：27 pxfont-size :1 px宽度：12 px；背景： URL(图片/TItle ft。gif)不重复} .ts .titOp { float : leftheight :21 xpadding :5 px 0 0 } .ts .titOp li { float:left宽度宽度：100像素宽度：15像素宽度：5像素0像素：0像素0像素0像素3像素：1像素固体# 88AAD6border-bottom:1px实心# fffbackground : # eeeeffcolor : # 999文本对齐：居中；cursor:default} .ts .titOp李。当前{背景： # fffcolor: # 290052}。ts .滴答声{浮动：右高度：26 pxfont-size :1 px宽度：32 px；背景：网址(图像/滴答声。gif)不重复} .ts .线{边框-左侧：1px实线# 88AAD6右边框：1px实心# 88 aad6clear : both height :13 px线高：13 pxpadd :5 pxbackground : # E9F 9fe } .ts .tsMb{border:1px固态# 88AAD6border-top :无；padding:10px高度：120 px最小高度：100 pxfont-weight : bold }/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script script $(function(){ $(' # tsMb div : not(: first)')).hide()；$('#titOp li ').每个（函数（索引){ $(这个)).鼠标悬停在(function(){ $(' # TiToP Li)上。当前').removeClass(“”当前');$(这个)。添加CLaSS(' current ')；$('#tsMb div:visible ').hide()；$('#tsMb div:eq(' index ')').show()；})})))})/script/head dy div style=' clear : both；高度：30 px '/div class=' ts ' div class=' TSHead ' div class=' TItleft '/div class=' TiToP ' id=' TiToP ' ul Li class=' current '脚本调试器/li li样式调试器/li liDOM调试器/Li/ul/div class=' TitLight '/div/div class=' TSMb ' id=' TSMb ' div脚本/div样式/div DivDom/div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。