javascript Tab选项卡菜单

作者：简简单单 2011-09-06

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

<!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>常用的Tab选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{
	margin:0 auto;
	padding:0;
}
body{
	font:12px "宋体";
	text-align:center;
}
a:link,a:visited{
	color:#999;
	text-decoration:none;
}
a:hover{
	color:#666;
	text-decoration:underline;
}
ul{
	list-style:none;
}
li{
	color:#999;
	
	line-
	border-bottom:#eee 1px dashed;
}
.main{
	clear:both;
	padding:8px;
	text-align:center;
}
/*Tab样式开始??/
#tabs1{
	text-align:left;
	
	position:relative;
}
.menu1box{
	overflow:hidden;
	
	
	text-align:left;
}
#menu1{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#menu1 li{
	float:left;
	display:block;
	cursor:pointer;
	
	text-align:center;
	line-
	
	padding-top:2px;
	border-bottom:none;
}
#menu1 li.hover{
	background:#FFFFFF url() no-repeat top center;
	color:#0DA5E6;
	font-weight:bold;
}
.main1box{
	clear:both;
	margin-top:-1px;
	border-top:1px solid #E4E4E4;
	
	
}
#main1 ul{
	display:none;
	text-align:left;
}
#main1 ul.block{
	display:block;
}
</style>
<script language="javascript">
/*更换显示样式*/
function setTab(m,n){
	var tli=document.getElementById("menu"+m).getElementsByTagName("li");
	var mli=document.getElementById("main"+m).getElementsByTagName("ul");
	for(i=0;i<tli.length;i++){
		tli[i].className=i==n?"hover":"";
		mli[i].style.display=i==n?"block":"none";
	}
}
</script>
</head>
<body>

<div id="tabs1">
  <div class="menu1box">
    <ul id="menu1">
      <li class="hover" onclick="setTab(1,0)">网站建设</li>
      <li onclick="setTab(1,1)">SEO优化</li>
      <li onclick="setTab(1,2)">煤球机器</li>
    </ul>
  </div>
  <div class="main1box">
    <div class="main" id="main1">
      <ul class="block">
        <li><a href="#">网站的网络营销方案怎么写</a></li>
        <li><a href="#">企业如何做好网站建设营销SEM </a></li>
        <li><a href="#">搜索引擎营销SEM的目的是什么</a></li>
        <li><a href="#">网站推广之网站图片的SEO优化技巧</a></li>
        <li><a href="#">SEO优化之网站内部如何优化</a></li>
        <li><a href="#">百度近期干预的力度很明显很强大</a></li>
        <li><a href="#">如何让搜索引擎收录更多的网站</a></li>
        <li><a href="#">网站SEO优化之百度搜索引擎</a></li>
      </ul>
      <ul>
        <li><a href="#" title="网站推广之如何更好的把自己的">网站推广之如何更好的把自己的</a></li>
        <li><a href="#">网站建设过程中网站标题的SEO</a></li>
        <li><a href="#">搜索引擎SEO营销(SEM)的服务流程</a></li>
        <li><a href="#">搜索引擎营销SEM的目的是什么</a></li>
        <li><a href="#">商丘seo之百度近期可能要进行大</a></li>
        <li><a href="#">网站SEO优化之一次增加很多外链</a></li>
        <li><a href="#">网站SEO之如何增加百度的相关域</a></li>
        <li><a href="http://www.111com.net">手机主题</a></li>
        <li><a href="#">来自Jary的博客2来自Jary的博客2</a></li>
      </ul>
      <ul>
        <li><a href="#" title="煤球机">煤球机设备的修理方法</a></li>
        <li><a href="#" title="煤球机">国内外煤球机的厂家是哪些</a></li>
        <li><a href="#" title="煤球机厂家">煤球是如何做出来的</a></li>
        <li><a href="#" title="煤球机公司">有没有最好的煤球机机器设备</a></li>
        <li><a href="#" title="河南煤球机">国内常见的煤球机设备</a></li>
        <li><a href="#" title="商丘煤球机">煤球机的工作原理是什么</a></li>
        <li><a href="#" title="煤球机">煤矿与煤球机的渊源有那些地方</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

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

javascript Tab选项卡菜单

相关文章

精彩推荐