<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin:0; padding: 0;} .tab_wrap{ width: 600px; margin:0 auto; height: 100%; background-color: #ddd; overflow: hidden; } .tw_ui{ border-bottom: 1px solid #ccc; overflow: hidden;} .tw_ui li{ width: 50%; text-align: center; font-size: 16px; float: left; list-style: none; display: block; height: 35px; line-height: 35px; cursor: pointer;} .tw_ui li.current{ background: red; color: #fff; } .tab{ font-size: 30px; text-align: center; height: 300px; line-height: 300px;} </style> </head> <body> <div class="tab_wrap" id="tabWrap"> <ul class="tw_ui" id="tabUi"> <li class="current">标题一</li> <li>标题二</li> </ul> <div class="tab J_tab">内容一</div> <div class="tab J_tab" style=" display: none;">内容二</div> </div> <script type="text/javascript"> var tabWrap = document.getElementById("tabWrap");//获取tabWrap var objLi = tabWrap.getElementsByTagName('li');//获取tabWrap下的li var tabContent=tabWrap.getElementsByClassName('J_tab') ;//获取tabWrap下的J_tab for (var i = 0; i < objLi.length; i++) {//循环每个按钮 objLi[i].index=i; //objLi[i]是指定li的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i objLi[i].onclick=function(){ for (var i = 0; i < objLi.length; i++) {//循环去掉li的样式，把J_tab隐藏 objLi[i].className='';//清空同辈兄弟按钮的样式 tabContent[i].style.display="none";//隐藏J_tab } this.className='current';//自身添加current tabContent[this.index].style.display='block'//this.index是当前J_tab } } </script>
效果图：
