通常我们会在日常的网站开发中实现选项卡的功能，其实这个功能用事件冒泡很容易实现，而且实现起来的复杂度比用for()循环遍历来的简单。代码为例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项卡</title> <style> /* //清空默认的边距 */ *{ margin: 0; padding: 0; } .show{ height: 300px; width: 600px; border: 1px solid black; margin: 100px auto 0px auto; display: none; } div:first-child{ display: block; } .tab{ height: 100px; width: 600px; border: 1px solid black; margin: 0px auto ; } .tab ul li{ height: 100px; width: 33.2%; text-align: center; background: yellow; list-style: none; float: left; border-right: 1px solid black; cursor: pointer; } .tab ul li:last-child{ border-right:none; } </style> </head> <body> <div class="show"> 这里是展示区域1 </div> <div class="show"> 这里是展示区域2 </div> <div class="show"> 这里是展示区域3 </div> <div class="tab"> <ul> <li class="li">tab1</li> <li class="li">tab2</li> <li class="li">tab3</li> </ul> </div> <script> window.onload=function(){ var $tab=document.getElementsByClassName('tab')[0]; var li=document.getElementsByClassName('li');//tab选择的内容 for(var i=0;i<li.length;i++){ li[i].index=i; } var show=document.getElementsByClassName('show'); //显示的内容 for(var i=0;i<show.length;i++){ show[i].index=i; } var last_one=0;//定义最后显示的模块index $tab.onclick=function(e){ var e=e||window.e; var target=e.target||e.srcElement;//找到目标 if(target.className==='li'){ show[last_one].style.display='none';//最后一个显示的设置为不显示 show[target.index].style.display='block';//当前的设置为显示 last_one=target.index; } } } </script> </body> </html>