<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>tab栏的套路就是先全部隐藏，再展示这个</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} .box { width: 250px; height: 300px; margin:100px auto; border:1px solid #ccc; overflow: hidden; } .mt span { display: inline-block; width: 50px; height: 30px; background-color: pink; text-align: center; line-height: 30px; cursor: pointer; } .mt span.current { background-color: purple; } .mb li { width: 100%; height: 270px; background-color: purple; display: none; } .mb li.show { display: block; } </style> <script> window.onload = function(){ function table(obj){ var target = document.getElementById(obj); var spans = target.getElementsByTagName("span"); var lis = target.getElementsByTagName("li"); for(var i= 0;i<spans.length;i++) { spans[i].index = i; // 难点tns[i].index = i; // 难点 var sp = spans[i]; spans[i].onmouseover = function(){ for(var j=0;j<spans.length;j++) { spans[j].className = ""; lis[j].className = ""; } this.className = "current"; lis[this.index].className = "show"; } } } table("one"); table("two"); table("three"); } </script> </head> <body> <div class="box" id="one"> <div class="mt"> <span class="current">新闻</span> <span>娱乐</span> <span>体育</span> <span>小说</span> </div> <div class="mb" > <ul> <li class="show">新闻知识</li> <li>娱乐知识</li> <li>体育知识</li> <li>小说知识</li> </ul> </div> </div> <div class="box" id="two"> <div class="mt"> <span class="current">新闻2</span> <span>娱乐</span> <span>体育</span> <span>小说</span> </div> <div class="mb" > <ul> <li class="show">新闻知识2</li> <li>娱乐知识</li> <li>体育知识</li> <li>小说知识</li> </ul> </div> </div> <div class="box" id="three"> <div class="mt"> <span class="current">新闻3</span> <span>娱乐</span> <span>体育</span> <span>小说</span> </div> <div class="mb" > <ul> <li class="show">新闻知识3</li> <li>娱乐知识</li> <li>体育知识</li> <li>小说知识</li> </ul> </div> </div> </body> </html>