做个简单的tab切换效果，分别于jquery和js操作
（1）jQuery操作
先看下效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{box-sizing:border-box;padding: 0;margin: 0} ul{width: 100%;height: 50px;text-align: center;margin: 10px 0;} ul li{list-style: none;height: 100%;width: 100px; line-height: 50px;text-align: center;background-color: #9c8b8b; margin: 0 6px;display: inline-block;cursor: pointer;} section{width: 600px;height: 300px;border: 1px solid red;margin: 100px auto;} #area{width: 400px;height: 200px;margin: 10px auto;border: 1px solid red;} .child{width: 100%;height: 100%;float: left;display: none;text-align: center;line-height: 200px;font-size: 20px;color: black;} .active{display: block} #area .child:nth-child(1){ background-color: red; } #area .child:nth-child(2){ background-color: green; } #area .child:nth-child(3){ background-color: blue; } #area .child:nth-child(4){ background-color: yellow; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="area"> <div class="child active"> 内容一 </div> <div class="child"> 内容二 </div> <div class="child"> 内容三 </div> <div class="child"> 内容四 </div> </div> </section> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(function(){ $("ul li").on('click',function(){ var index = $(this).index(); $(".child").each(function() { if (index == $(this).index()) { $(this).siblings().removeClass('active'); $(this).addClass('active'); } }) }) }) </script> </body> </html>
（2）js操作
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon { clear: both; } #tabCon div { display:none; } #tabCon div.fdiv { display:block; } </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> </div> <div id="tabCon"> <div class="fdiv">内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> </div> </div> </body> <script> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tabCon").getElementsByTagName("div"); for(var i=0;i<tabs.length;i++){ tabs[i].onclick=function(){ change(this); } } function change(obj){ for(var i=0;i<tabs.length;i++){ console.log(tabs[i]) if(tabs[i]==obj){ divs[i].className="fdiv"; }else{ divs[i].className=""; } } } </script> </html>
.