网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。
方法一：
方法一利用简单的代码即可实现，以下是全部的代码；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style> </head> <body> <div> <ul> <li>首页</li> <li>产品</li> <li>新闻</li> <li>联系</li> <li>我的</li> </ul> <div> <div> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div"); //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script> </body> </html>
首先我们在HTML部分定义网页选项卡中的内容。
<div> <ul><!--选项卡中的点击部分--> <li>首页</li> <li>产品</li> <li>新闻</li> <li>联系</li> <li>我的</li> </ul> <div> <div><!--选项卡中要显示和被显示的部分--> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div>
CSS部分对HTML中的内容进行修饰：
<style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style>
最后是最重要的js部分：
<script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素 //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script>
JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分；因为I这个变量在下面的事件函数中无法访问到，所以每次点击时，i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值，供下面使用。即：oli[i]._index=i;
添加点击函数后，第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display='none'；循环结束后，在给当前点击的这个oli添加className和下面相应的odiv的style为display='block';
以下是运行的结果：