非常简洁的网页Tab效果setTab

网页上使用频率最高的Tab标签效果，封装成了一个setTab函数，使用方法非常简单。

setTab函数完整代码：

		<script>

		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>

使用方法：

通过对象的onmouseover事件来触发这个函数(也可以使用onclick事件)。

复制代码代码如下:

		<div class="Menubox">

		  <ul>

		    <li id="one1" onmouseover="setTab('one',1,4)" >新闻1</li>

		    <li id="one2" onmouseover="setTab('one',2,4)" class="hover">新闻2</li>

		    <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>

		    <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>

		  </ul>

		</div>

		<div class="Contentbox">

		  <div id="con_one_1"  style="background:#CCCC00;">新闻列表1</div>

		  <div id="con_one_2" style="background:#FFCCCC;display:none">新闻列表2</div>

		  <div id="con_one_3" style="background:#CCCCFF;display:none">新闻列表3</div>

		  <div id="con_one_4" style="background:#99CC33;display:none">新闻列表4</div>

		</div>

效果截图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>非常简洁的网页Tab效果setTab</title>
<style type="text/css">
body, div, ul, li {
	padding:0;
	text-align:center;
}
body {
	font:12px "宋体";
	text-align:center;
}
a{
	color:#00F;
	text-decoration:none;
}
ul {
	list-style:none;
}
.Menubox {
	width:50%;
	background:#EEE;
	height:28px;
	line-height:28px;
	border:1px solid #A8C29F;
	border-bottom:none;
}
.Menubox ul {
	margin:0px;
	padding:0px;
}
.Menubox li {
	float:left;
	display:block;
	cursor:pointer;
	width:114px;
	text-align:center;
	color:#949694;
	font-weight:bold;
}
.Menubox li.hover {
	padding:0px;
	background:#fff;
	width:116px;
	border:1px solid #A8C29F;
	border-bottom:none;
	border-top:none;
	background:#CCC;
	color:#739242;
	font-weight:bold;
	height:27px;
	line-height:27px;
}
.Contentbox {
	width: 50%;
	clear:both;
	margin-top:0px;
	border:1px solid #A8C29F;
	border-top:none;
	height:181px;
	text-align:center;
	padding-top:8px;
}
</style>
<script>
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>
</head>
<body>
<br>
<br>
<div class="Menubox">
  <ul>
    <li id="one1" onmouseover="setTab('one',1,4)" >新闻1</li>
    <li id="one2" onmouseover="setTab('one',2,4)" class="hover">新闻2</li>
    <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>
    <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>
  </ul>
</div>
<div class="Contentbox">
  <div id="con_one_1"  style="background:#CCCC00;">新闻列表1</div>
  <div id="con_one_2" style="background:#FFCCCC;display:none">新闻列表2</div>
  <div id="con_one_3" style="background:#CCCCFF;display:none">新闻列表3</div>
  <div id="con_one_4" style="background:#99CC33;display:none">新闻列表4</div>
</div>
<br />
</body>
</html>

随机推荐

JS高级Marquee代码
JS高级Marquee代码创建实例: //参数直接赋值法 new Marquee(marquee) new Marquee(marquee,top) ...... new Marquee(marquee,0,1,760,52) new Marquee(marquee,top,1,760,52,50,5000) ...... new Marquee(marquee,0,1,760,104,50,5000,3000,52) new Marquee
手机站底部快速问医生动态图标效果
手机站底部快速问医生动态图标效果，手机站底部常用的快速问医生效果实现。完整代码：复制代码代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.
flash焦点图效果slide.swf体积超小，调用方便
flash焦点图效果slide.swf体积超小，调用方便，swf文件大小只有10K，图片随机切换效果。代码打包下载： flash焦点图效果slide.swf体积超小，调用方便效果截图：代码解释：复制代码代码如下: script language=javascript linkarr = new Array(); //定义
非常简洁的网页Tab效果setTab
网页上使用频率最高的Tab标签效果，封装成了一个setTab函数，使用方法非常简单。 setTab函数完整代码：复制代码代码如下: script function setTab(name, cursel, n) { for (i = 1; i = n; i++) { var menu = document.getElementById(name + i); var con =
flash图片轮播bcastr4
flash图片轮播bcastr4,flash实现的图片轮播播放器效果。包含一个slide.swf和一个配置文件config.xml。使用起来简单方便。示例打包下载： flash图片轮播bcastr4 测试请上传到服务器上。使用代码：复制代码代码如下: object id=bcastr4 data=swf/slide.swf

非常简洁的网页Tab效果setTab

相关文章

随机推荐