小结：tab标签通过与对应内容index绑定,为当前tab添加一个样式，移除其他，显示当前内容块，隐藏其他内容。（即tab[0]==>section[0]）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style> *{padding: 0;margin: 0} ul{width: 300px;border: 1px solid #0e90d2;text-align: center} ul li{list-style: none;} div{margin: 100px;} ul.tab{overflow: hidden} ul.tab li{ float: left; width: 50%; } .activity{background: #00E8D7} </style> </head> <body> <div> <ul class="tab"> <li>tab1</li> <li>tab2</li> </ul> <ul class="section"> <li >section1</li> <li >section2</li> </ul> </div> <script> jqtab('.tab', '.section', 'click'); //可以封装成方法 直接调用 function jqtab(tab,section,event) { $(section+'>li').hide(); $(tab).find("li").eq(0).addClass("activity").show(); $(section).find("li").eq(0).show(); //绑定事件 $(tab).find("li").bind(event,function(){ $(this).addClass("activity").siblings("li").removeClass("activity"); var activeindex = $(tab).find("li").index(this); $(section).children().eq(activeindex).siblings().hide(); if($(section).children().eq(activeindex).hide()) { $(section).children().eq(activeindex).show(); } return false; }); } </script> </body> </html>
