vertical-tab

伊苏

浏览: 111498 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css js html

vertical tab component

approach 1
implement with li and div,
set li width 61px,and float left
set div margin-left 61px,

it's work in FF & chrome, but not work in IE6

<html>
	<head>
		<title>tab demo</title>
		<style>
			.ul {padding: 0; margin: 0; float: left; z-index: 2;}
			.ul li {margin: 0; padding: 0; border: 1px solid #777; border-bottom: 0; list-style: inside none; width: 60px; cursor: pointer;}
			.ul li.bottom {border: 0; border-top: 1px solid #777; width: 61px; cursor: auto;}
			.ul li.active {background-color: lightgray; border-right: 1px solid lightgrey; }
			.ul li.hover {background-color: darkgray;}
			.content {border: 1px solid #777; margin-left: 61px; width: auto; height: 100%; padding: 5px; background-color: lightgray;}
		</style>
		<script>
			var currentItem=0;
			function outStyle(){
				if(this.className=="bottom")
					return;
				else if(this.value!=currentItem)
					this.className="";
				else
					this.className="active";
			}
			function hoverStyle(){
				if(this.className=="bottom")
					return;
				this.className="hover";
			}
			function clickStyle(){
				this.parentNode.childNodes[currentItem].className="";
				this.className="active";	
				currentItem=this.value;
			}
			function init(){
				var ul=document.getElementsByTagName("ul")[0];
				var len=ul.childNodes.length;
				for(var i=0;i<len-2;i++){
					var e=ul.childNodes[i];
					if("li"!=e.nodeName.toLowerCase())
						continue;
					e.value=i;
					e.onclick=clickStyle;
					e.onmouseover=hoverStyle;
					e.onmouseout=outStyle;
					//decide first li, and set to currentItem
					if(e.className=="active")
						currentItem=e.value;
				}
			}
			window.onload=init;
		</script>
	</head>
	<body>
		<div style="border: 0px solid blue; padding: 5px; margin: 5px; width: 50%; height: 50%;">
			<ul class="ul">
				<li class="active">a</li>
				<li>b</li>
				<li>c</li>
				<li>d</li>
				<li>e</li>
				<li class="bottom">&nbsp;</li>
			</ul>
			<div class="content">
				<div style="border: 1px solid #cdabde; height: 100%; width: 100%; background-color: white">abc</div>
			</div>
		</div>
	</body>
</html>

result:

approach2
implement with table
list tag as first td, and combine all second td as container
it work in IE6, FF, but the border-right of 1st td can't be invisible in chrome.
I believe it's bug of chrome.
hi, it's the reason why FF became the best favor choice in front designer

<html>
	<head>
		<title>tab demo</title>
		<style>
			#t {
				border-collapse: collapse;
				margin: 0;
				padding: 0;
				width: 300px;
				height: 70%;
			}
			#t td{
				margin: 0;
				padding: 0px;
			}
			#t td.left {
				width: 80px;
				height: 22px;
				padding: 0;
				margin: 0;
				border: 1px solid #777;
				cursor: pointer;
			}
			#t td.left_bottom {
				width: 80px;
				border-right: 1px solid #777;
			}
			#t td.left_hover {
				width: 80px;
				height: 22px;
				border: 1px solid #777;
				border-right: 0;
				background-color: darkgray;
			}
			#t td.left_active {
				width: 80px;
				height: 22px;
				border: 1px solid #777;
				border-right: 0;
				background-color: aqua;
			}
			#t td.content {
				border: 1px solid #777;
				border-left: 0;
				padding: 3px;
				background-color: aqua;
			}
			#t td.content div {
				height: 100%;
				border: 0px solid #777;
				margin: 0;
				padding: 0;
			}
		</style>
		<script>
			var currentTD=0;
			function clickStyle(){
				var tr=this.parentNode;
				var t=tr.parentNode;
				t.rows[currentTD].cells[0].className="left";
				this.className="left_active";
				currentTD=tr.rowIndex;
			}
			function outStyle(){
				if(this.className=="bottom")
					return;
				else if(this.parentNode.rowIndex!=currentTD)
					this.className="left";
				else
					this.className="left_active";
			}
			function hoverStyle(){
				if(this.className=="left_bottom")
					return;
				this.className="left_hover";
			}
			function init(){
				var t=document.getElementById("t");
				var len=t.rows.length;
				for(var i=0;i<len-1;i++){
					t.rows[i].cells[0].className="left";
					t.rows[i].cells[0].onclick=clickStyle;
					t.rows[i].cells[0].onmouseover=hoverStyle;
					t.rows[i].cells[0].onmouseout=outStyle;
				}
				t.rows[0].cells[0].className="left_active";
			}
			window.onload=init;
		</script>
	</head>
	<body>
		<table id="t">
			<tr>
				<td><a href="#" onclick="document.getElementById('if').src='../processbar/demo.html'">demo</a></td>
				<td rowspan="6" class="content">
					<div style="border: 1px solid #ccc; width: 100%; height: 100%; overflow: auto; text-align: center; background-color: white;">
						<iframe id="if" name="if" frameborder="0" height="98%" width="98%"></iframe>
					</div>
				</td>
			</tr>
			<tr>
				<td><a href="#" onclick="document.getElementById('if').src='../processbar/demo_optimize.html'">demo2</a></td>
			</tr>
			<tr>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
			</tr>
			<tr>
				<td>5</td>
			</tr>
			<tr>
				<td class="left_bottom">&nbsp;</td>
			</tr>
		</table>
	</body>
</html>

result