CSS三种简单的选项卡效果

最新推荐文章于 2023-04-12 22:26:15 发布

原创最新推荐文章于 2023-04-12 22:26:15 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #menu #div #tabs #border

CSS Study 专栏收录该内容

7 篇文章

订阅专栏

	<!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=gb2312" />
	<title>简洁Tab</title>
	<style type="text/css">
	<!--
	body,div,ul,li{
	margin:0 auto;
	padding:0;
	}
	body{
	font:12px "宋体";
	text-align:center;
	}
	a:link{
	color:#00F;
	text-decoration:none;
	}
	a:visited {
	color: #00F;
	text-decoration:none;
	}
	a:hover {
	color: #c00;
	text-decoration:underline;
	}
	ul{
	list-style:none;
	}
	.main{
	clear:both;
	padding:8px;
	text-align:center;
	}
	/第一种形式/
	#tabs0 {
	height: 200px;
	width: 400px;
	border: 1px solid #cbcbcb;
	background-color: #f2f6fb;
	}
	.menu0{
	width: 400px;
	}
	.menu0 li{
	display:block;
	float: left;
	padding: 4px 0;
	width:100px;
	text-align: center;
	cursor:pointer;
	background: #FFFFff;
	}
	.menu0 li.hover{
	background: #f2f6fb;
	}
	#main0 ul{
	display: none;
	}
	#main0 ul.block{
	display: block;
	}
	/第二种形式/
	#tabs1{
	text-align:left;
	width:400px;
	}
	.menu1box{
	position:relative;
	overflow:hidden;
	height:22px;
	width:400px;
	text-align:left;
	}
	#menu1{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	}
	#menu1 li{
	float:left;
	display:block;
	cursor:pointer;
	width:72px;
	text-align:center;
	line-height:21px;
	height:21px;
	}
	#menu1 li.hover{
	background:#fff;
	border-left:1px solid #333;
	border-top:1px solid #333;
	border-right:1px solid #333;
	}
	.main1box{
	clear:both;
	margin-top:-1px;
	border:1px solid #333;
	height:181px;
	width:400px;
	}
	#main1 ul{
	display: none;
	}
	#main1 ul.block{
	display: block;
	}
	/第三种形式/
	.menu2box{
	position:relative;
	overflow:hidden;
	height:22px;
	width:400px;
	text-align:left;
	background: #FFFFff;
	}
	#tabs2 {
	height: 200px;
	width: 400px;
	border: 1px solid #cbcbcb;
	background-color: #f2f6fb;
	}
	#tip2{
	position:absolute;
	top:0;
	left:0;
	height:22px;
	line-height:22px;
	z-index:0;
	width:100px;
	background: #f2f6fb;
	}
	#menu2{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	}
	#menu2 li{
	display:block;
	float: left;
	padding: 4px 0;
	width:100px;
	text-align: center;
	cursor:pointer;
	}
	-->
	</style>
	<script>
	<!--
	/第一种形式第二种形式更换显示样式/
	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";
	}
	}
	/第三种形式利用一个背景层定位/
	var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
	function nowtab(m,n){
	if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
	document.getElementById("tip"+m).style.left=n*100+'px';
	document.getElementById("main2").innerHTML=m3[n];
	}
	//-->
	</script>
	</head>
	<body>
	<br />
	<br />
	<!--第一种形式-->
	<div id="tabs0">
	<ul class="menu0" id="menu0">
	<li onclick="setTab(0,0)" class="hover">新闻</li>
	<li onclick="setTab(0,1)">评论</li>
	<li onclick="setTab(0,2)">技术</li>
	<li onclick="setTab(0,3)">点评</li>
	</ul>
	<div class="main" id="main0">
	<ul class="block"><li>新闻列表</li></ul>
	<ul><li>评论列表</li></ul>
	<ul><li>技术列表</li></ul>
	<ul><li>点评列表</li></ul>
	</div>
	</div>
	<br />
	<br />
	<!--第二种形式-->
	<div id="tabs1">
	<div class="menu1box">
	<ul id="menu1">
	<li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
	<li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
	<li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
	<li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
	</ul>
	</div>
	<div class="main1box">
	<div class="main" id="main1">
	<ul class="block"><li>新闻列表</li></ul>
	<ul><li>评论列表</li></ul>
	<ul><li>技术列表</li></ul>
	<ul><li>点评列表</li></ul>
	</div>
	</div>
	</div>
	<br />
	<br />
	<!--第三种形式-->
	<div id="tabs2">
	<div class="menu2box">
	<div id="tip2"></div>
	<ul id="menu2">
	<li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
	<li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
	<li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
	<li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
	</ul>
	</div>
	<div class="main" id="main2">
	新闻内容
	</div>
	</div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	</body>
	</html>