添加className改变选中标签样式
位置索引,控制对应div进行显示/隐藏
<script> function getId(e){ return document.getElementById(e); } function switchTab(index){ for(var i=0;i<2;i++){ getId("tab"+i).className=""; getId("subtab"+i).style.display="none"; } getId("tab"+index).className="select"; getId("subtab"+index).style.display="block"; } </script>
<div id="menu"> <ul> <li id="tab0" class="select" οnclick="switchTab(0)">tab1</li> <li id="tab1" οnclick="switchTab(1)">tab2</li> </ul> </div> <div id="cont"> <div id="subtab0"> <span class="usable">tab1的内容</span> <span class="usable">tab1的内容</span> <span class="usable">tab1的内容</span> </div> <div id="subtab1" class="disable-box" style="display: none"> <span class="disable">tab2的内容</span> </div>
</div>