在编写程序时一定要注意，选项卡中的点击部分即：li的数量（JS里oli.length）要和下面ID为content的div里包含的div数量（JS里odiv.length）相同，我在编写程序时就因为oli.length与odiv.length不相等，导致程序报错，但是好长时间都找不到错误；总而言之还是要多多细心。
方法二：
方法一适用于选项卡比较少的情况，但如果选项卡内容较多时我们要用到这种方法，第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点：自运行函数
(function a(){ //函数里的内容 })(参数);
定义函数a();给整个函数带上括号，后面的括号为输入参数；
以下为方法二自运行函数的程序：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多个tab选项卡</title> <script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //console.log(i) (function(index) {//自执行函数 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件监听 })(i) } } } </script> <style> * { padding: 0; margin: 0; list-style: none; } .tabMenu { width: 300px; margin: 50px auto 0 auto; } .tabMenu ul { display: block; overflow: hidden; width: 300px; height: 40px; background: #eee; } .tabMenu ul li { cursor: pointer; display: block; float: left; width: 100px; text-align: center; height: 40px; line-height: 40px; font-size: 16px; } .tabMenu ul li.active { background: #f00; color: #fff; } .tabMenu .tabSide { display: none; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } .tabMenu div.active { display: block; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } </style> </head> <body> <div> <ul> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> <div> <ul> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> <div> <ul> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> <div> <ul> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </body> </html>
和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；
<script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //alert(i)； (function(index) {//自执行函数 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件监听 })(i) } } } </script>
通过添加事件和自运行函数完成多个选项卡。
您可能感兴趣的文章: