浅析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;
	}