浅析js选项卡（第一种）

浅析js选项卡（第一种方式）

js选项卡主要运用ul和li的显示和隐藏，display:block;和display:none;

  <div id="header"><!--导航选项区域--><ul id="menu"><li onMouseOver="secBoard(0)" class="sec2">最新新闻</li><li onMouseOver="secBoard(1)" class="sec1">最新文章</li><li onMouseOver="secBoard(2)" class="sec1">最新日志</li><li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li></ul><!--导航选项区域--><!--内容显示区域--><ul id="main"><li class="block">111111111</li><li class="unblock">11111111111</li><li class="unblock">11111</li><li class="unblock">111111111111</li></ul><!--内容显示区域--></div>

<script language=javascript>function secBoard(n) {var menu = document.getElementById('menu').getElementsByTagName('li');var main = document.getElementById('main').getElementsByTagName('li');//一共有多少个选项卡for (i = 0; i < menu.length; i++) {menu[i].className = "sec1";}menu[n].className = "sec2";alert(n);for (i = 0; i < main.length; i++) {main[i].style.display = "none";}main[n].style.display = "block";//alert(menu[n].className);}</script>

//控制显示与不显示.block{display:block;}.unblock{display:none;}