首先我们来写HTML代码，构建出整体结构
代码如下：
<!--导航栏部分HTML代码--> <nav> <ul> <li>选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> </ul> </nav> <!--内容部分HTML代码--> <div> <section>内容1</section> <section>内容2</section> <section>内容3</section> <section>内容4</section> </div>
注：section 部分添加了style，目的是方便演示，为规范HTML与css的代码风格，不推荐这样使用。
接着我们使用css代码构建出样式
代码如下：
*{ text-align: center; } nav li{ display: inline; width: 24%; text-decoration: none; padding: 15px; } li:hover{ background-color: lightblue; } section{ height: 300px; }
最后是js的代码，实现选项卡功能
代码如下：
window.onload=function () { //获取 li 也就是选项卡选项tab var nav=document.getElementById('nav'); var oNav=nav.getElementsByTagName('li'); //获取 包裹在container里面的section（内容） var container=document.getElementById('container'); var oDiv=container.getElementsByClassName('tab'); //使用 循环依次得到li for(var i=0;i<oNav.length;i++){ oNav[i].index=i; //每一次得到li后执行鼠标点击操作则触发函数function oNav[i].onclick=function () { //此处除了可以使用onclick，还可以使用onmouseover //在li的个数内依次展示内容 for(var i=0;i<oNav.length;i++){ oNav[i].className=''; oDiv[i].style.display="none"; } this.className='act'; oDiv[this.index].style.display="block" } for(var m=1;m<oNav.length;m++){ oNav[m].className=''; oDiv[m].style.display="none"; } } };
此上就是用js实现简单选项卡的全部内容，下面是整个代码，复制粘贴到编译器即可运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ text-align: center; } nav li{ display: inline; width: 24%; text-decoration: none; padding: 15px; } li:hover{ background-color: lightblue; } section{ height: 300px; } </style> </head> <body> <!--导航栏部分HTML代码--> <nav> <ul> <li>选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> </ul> </nav> <!--内容部分HTML代码--> <div> <section>内容1</section> <section>内容2</section> <section>内容3</section> <section>内容4</section> </div> <script> window.onload=function () { var nav=document.getElementById('nav'); var oNav=nav.getElementsByTagName('li'); var container=document.getElementById('container'); var oDiv=container.getElementsByClassName('tab'); for(var i=0;i<oNav.length;i++){ oNav[i].index=i; oNav[i].onclick=function () { for(var i=0;i<oNav.length;i++){ oNav[i].className=''; oDiv[i].style.display="none"; } this.className='act'; oDiv[this.index].style.display="block" } for(var m=1;m<oNav.length;m++){ oNav[m].className=''; oDiv[m].style.display="none"; } } }; </script> </body> </html>
以下是效果图
注：网上还用很多用jQuery实现选项卡的方法，只需三行，等下次有机会弄懂了再分享。
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总