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"; } } }
这样就实现了一个选项卡。