javascript选项卡

<!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>
效果图：