非常简洁的网页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>

随机推荐

网页浮动窗口跟随页面上下滑动效果
网页浮动窗口跟随页面上下滑动效果，当网页滚动条向下滚动的时候，该浮动窗口也会向下滑动。核心代码：复制代码代码如下: script var tips; var theTop = 100; /*这是默认高度,越大越往下*/ var old = theTop; window.onload=function(){ initFloatTips()
手机站底部快速问医生动态图标效果
手机站底部快速问医生动态图标效果，手机站底部常用的快速问医生效果实现。完整代码：复制代码代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.
非常简洁的网页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 =
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
纯JS写的右下角QQ抖动效果
纯JS写的右下角QQ抖动效果，代码简单容易理解修改。复制代码代码如下: script /*** 窗口抖动 ***/ function shake(){ var a=[bottom,right],b=0; var u=setInterval(function(){ document.getElementById(lovexin1).style[a[b%2]]=(b++)%42?0:4 + px; if(b

非常简洁的网页Tab效果setTab

相关文章

随机推荐