jQuery实现选项卡功能（两种方法)

效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 '脚本src=' http :http://代码。jquery。com/jquery-1。8 .0 .量滴js /脚本titleJQuery源码分析/title style # div 1 div { width : 200 px；高度： 200像素；border: 1px实心# FF0000display:无；} .活动{background:红色；} * { margin : 0；padd : 0；} .标签:在{内容： }之后；显示器：块；clear:两者；} .tab li {宽度： 150像素重量： 30像素线高： 30px文本对齐：中心；光标：指针；列表样式：无；向左浮动：margin : 0 10pxbackground : # ABcdefborder-radius : 5px；} .tab李。活动{后台： # 000；color: # fff}。内容：在{内容： }之后；显示器：块；clear:两者；} .内容Li { width : 460 pxh three : 300 pxpadding :20 px background : # f7f 7；显示器：无；}/style/head body div id=' div 1 ' input class=' active ' type=' button ' value=' 1 '/input type=' button ' value=' 2 '/input type=' button ' value=' 3 '/div style=' display : block；'1111111111/div 22222222/div 3333333/div/div ul class=' tab ' Li class=' active ' 1/Li Li 2/Li Li/ul class=' content ' Li style=' display : block；'11111111111111/Li Li 2222222222/Li Li 33333333/Li/ul script $(function(){//jQuery方法一$('#div1 ').查找('输入')。click(function(){ $(“# div 1”)).查找('输入')。attr('class '，' ')；$('#div1 ').查找(' div ').css('display '，' none') $(this).attr('class '，' active ')；$('#div1 ').查找(' div ').eq($(this)).index()).css('display '，' block ')；});//jQuery方法二$('.制表符')。查找('里').单击(函数(){ var index=$(this)).index()；$(这个)。addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$('.内容')。查找('里').eq(指数)。显示()。兄弟姐妹()。hide()；})})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！