JS+CSS实现选项卡功能

【小小一记】

首先我们写一个选项卡的结构出来，包括tab和content：

首先是tab：

<ul class="ttitle-box-tabs" id="tabs1">
    <li id="tab1" class="on">
        <a href="###" onmouseover="switchTab('tab1','content1');">
         <span class="tfont">第一个选项卡</span>
        </a>
    </li>
    <li id="tab2">
        <a href="###" onmouseover="switchTab('tab2','content2');">
             <span class="tfont">第二个选项卡</span>
        </a>
     </li>
     <li id="tab3">
         <a href="###" onmouseover="switchTab('tab3','content3');">
              <span class="tfont">第三个选项卡</span></a>
     </li>
</ul>

然后是content：

<div id="content1" class="current-content">
    <p>This is the first content</p>
</div>
<div id="content2" class="content">
    <p>This is the second content</p>
</div>
<div id="content3" class="content">
    <p>This is the third content</p>
</div>

CSS：

.ttitle-box-tabs .on{background-color: #FFA500;}

.current-content{display: block;}

.content{display: none;}

.on{background-color: #FFA500;}

JS:

<script type="text/javascript">
      function switchTab(ProTag,ProBox){
         for(i=1;i<4;i++){
            if("tab"+i==ProTag){
                 document.getElementById(ProTag).className="on";
             }
            else{
                 document.getElementById("tab"+i).className="";
             }          
            if("content"+i==ProBox){   
                 document.getElementById(ProBox).style["display"]="block";
             }
          else{
                 document.getElementById("content"+i).style["display"]="none";
             }
       }
}

这样就实现了一个选项卡。