今天突然心血来潮，想到一个很简单的方法即可达到的标签效果

其实逻辑很简单，但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢，请大侠指教

复制代码代码如下：doctype html html lang=' en ' head meta charset=' UTF-8 ' title jquery简易选项卡/title style * { margin 33600；划水：0;}身体，ul，li { margin:0划水：0;}车身{ font :12 px/1.5 Tahoma；} #外部{ width :450 pxmargin :10 px汽车；} # tab { overflow : hiddenzoom :1背景技术： # 000;border:1px固体# 000;} # tab Li { float : leftcolor : # fff高度：30 px光标：指针指针；线高：30 px列表样式-:型无；padding:0 20px } #标签李。当前{ color : # 000背景# ccc} #内容{ border:1px固体# 000边框-顶部-宽度：0;} # content ul {行高：25 pxdisplay : none margin :0 30pxpad :10 px 0；}/style/head dydiv id=' outer ' ul id=' tab ' Li class=' current '第一课/li li第二课/li li第三课/Li/ul div id=' content ' ul style=' display : block；1111/ul 2222/ul 3333/ul/div/div脚本src=' http :3358 libs。百度。com/jquery/1。9 .0/jquery。js '/script script $(function(){ window。onload=function(){ var $ Li=$(' # tab Li ')；var $ ul=$(' # content ul ')；$李。单击(function(){ $ Li。移除类()；var $t=$(this).index()；$(这个)。添加CLaSS(' current ')；$ul.css('display '，' none ')；$ul.eq($t).css('display '，' block ')；}) } });/脚本/正文/html

图片演示：

以上就是本文所述的全部内容了，希望大家能够喜欢。