javascript简单选项卡，一个页面可多次引用_循环倒计时for(i=1;i<=n;i++){ var menu=document.geteleme-优快云博客

本文介绍了一种使用HTML和JavaScript实现的选项卡效果，通过简单的鼠标悬停事件切换不同的内容区块，展示了基本的网页交互设计。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<script language="javascript" type="text/javascript">
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
<style type="text/css">
*{ margin:0; padding:0;}
li{ list-style:none;}
.main{ width:230px; border:solid 1px #e0e0e0; border-width:1px 1px 1px 0; margin:20px;}
.Menubox{
	width:100%;
	height:32px;
	line-height:32px;
}
.Menubox li{
	float:left;
	display:block;
	cursor:pointer;
	width:115px; height:32px;
	text-align:center;
	border:solid 1px #e0e0e0;
	border-width:0 0 1px 0;
	background:url(bg_li.gif) no-repeat left #f9f9f9;
}
.Menubox li.hover{
	width:115px;
	height:33px;
	border-bottom:none;
	color:#ec1c5f;
	font-weight:bold;
	background:url(bg_li.gif) no-repeat left #fff;
}
.Contentbox,.Contentbox1{
	border-left:solid 1px #e0e0e0;
	padding:10px;
	clear:both;
}
</style>
</head>

<body>
<div class="main">

<div class="Menubox">
    <ul>
       <li id="one1" onMouseOver="setTab('one',1,2)"  class="hover">新闻资讯</li>
       <li id="one2" onMouseOver="setTab('one',2,2)">最新动态</li>
    </ul>
</div>
<div class="Contentbox">
     <div class="free_mer1" id="con_one_1" style="display:;">新闻资讯</div>
     <div class="free_mer1" id="con_one_2" style="display:none;">最新动态</div>
</div>

</div>
</body>
</html>

用到的图片：bg_li.gif