【javascript学习指南】javascript简单实用的选项卡实例代码

时间：2017-08-01 来源：导航菜单阅读：

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript简单实用的选项卡<a href="http://www.bbyears.com/clist-203-1.html" target="_blank" class="keylink">导航菜单</a></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
#header{background-color:#F8F4EF;height:200px;width:400px;border:1px solid #ECE1D5;font-family:"宋体";font-size:12px;}
#menu{margin:0;padding:0;list-style-type:none;}
#menu li{display:block;width:100px;line-height:23px;text-align:center;float:left;cursor:pointer;}
.sec1{background-color:#FFFFCC;}
.sec2{background-color:#00CCFF;}
.block{display:block;}
.unblock{display:none;}
</style>
<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";
	for(i=0;i<main.length;i++){
		main[i].style.display="none";
	}
	main[n].style.display="block";
}
</script>
</head>
<body>

<ul id="menu">
		<li onMouseOver="secBoard(0)" class="sec2">最新新闻
		<li onMouseOver="secBoard(1)" class="sec1">最新文章
		<li onMouseOver="secBoard(2)" class="sec1">最新日志
		<li onMouseOver="secBoard(3)" class="sec1">论坛新帖
	
	<ul id="main">
		<li class="block">第一个内容：预防蜱虫必知的11个知识问答
		<li class="unblock">第二个内容：购物商城限时抢购，倒计时JS代码
		<li class="unblock">第三个内容：落魄千万富翁的一首歌－很man
		<li class="unblock">第四个内容：七十六个网站用户体验要点

</body>
</html>

提示：您可以先修改部分代码再运行

【javascript学习指南】javascript简单实用的选项卡实例代码

http://m.bbyears.com/wangyetexiao/34513.html

推荐访问:

上一篇：css实现三角形|CSS实现带小箭头二级下拉导航菜单

下一篇：网站导航设计_网站导航与网站目录结构设计经验分析