简明现代魔法 -> CSS层叠样式表 -> 竖向标签选项卡制作

竖向标签选项卡制作

2010-01-28

程序演示

CSS 代码

<style type="text/css">
<!--
.left_box{
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
}
.infopublish ul.left_box li {
	line-height: 1.89; 
}
body {
	color: #333;
	font-family:Verdana,宋体;  
	font-size: 12px;  
}
ol, ul {
	list-style: none;
}
.box{
	border:1px solid #99BBDD;
	padding-bottom:2px;
}
.box_1 ul{
	padding:5px;
}
.box_title{
	position: relative;
	height: 28px;
}
.box_title h3 {
	height: 26px;
	line-height: 26px;
	margin: 1px 1px 0;
	padding: 0 10px;
	font-weight: bold;
	font-size: 120%;
	color: #275c91;
}
.box_title span {
	float:right;
	padding-top:5px;
	padding-right:5px;
}

.infopublish {
	border-color: #7bce74;
}
.infopublish .box_title {
	background: none;
}
.infopublish .box_title h3 {
	height: 30px;
	line-height: 30px;
	margin: 1px 1px 0;
	color: #fff;
	background: url(nav.png) repeat-x 0 -390px;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/**/
.clearfix:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
.v-tab {
	width: 71px;
	float: left;
	display: inline;
	overflow: hidden;
	margin: -2px 1px -6px -5px !important;
	margin: -5px 1px -6px -5px;
}

.v-tab li {
	float: left;
}
.v-tab li a {
	float: left;
	width: 70px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: #ebf7e9;
	border: solid #7bce74;
	border-width: 0 1px 1px 0;
}
.v-tab li a:link,
.v-tab li a:visited {
	color: #2e7428;
}
.v-tab li a.current,
.v-tab li a:hover,
.v-tab li a:active {
	background: #fff;
	border-right: 0;
	font-weight: bold;
	padding-right: 1px;
}
.box .left_box li{
	line-height:24px;
}
.disable {
	display: none;
}
-->
</style>  

JavaScript 代码

function doClick_jy(o)
{
	o.className="current";
	var j;
	var id;
	var e;
	for(var i=1;i<=8;i++)
	{
		id ="jy"+i;
		j = document.getElementById(id);
		e = document.getElementById("jy_con"+i);
		if(id != o.id)
		{
 			j.className="";
 			e.style.display = "none";
		}
		else
		{
			e.style.display = "block";
		}
	}
}