TabControl菜单 – 筚路蓝缕

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hiker 's BLOG&lt;/title&gt;
&lt;style&gt;
body {
	font-size:12px;
	font-family:宋体
}
ul.TabBarLevel1 {
	list-style:none;
	margin:0;
	padding:0;
	height:29px;
	background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li {
	float:left;
	padding:0;
	height:29px;
	margin-right:1px;
	background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a {
	display:block;
	line-height:29px;
	padding:0 20px;
	color:#333;
	background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
	white-space:nowrap;
}
ul.TabBarLevel1 li.Selected {
	background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a {
	background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited {
	color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active {
	color:#F30;
	text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited {
	color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active {
	color:#F30;
	text-decoration:none;
}
div.HackBox {
	padding:2px 2px;
	border-left:2px solid #6697CD;
	border-right:2px solid #6697CD;
	border-bottom:2px solid #6697CD;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="Whatever"&gt;
	&lt;ul class="TabBarLevel1" id="TabPage1"&gt;
		&lt;li id="Tab1"&gt;&lt;a href="#" onclick="javascript:switchTab('TabPage1','Tab1'); "&gt;宝贝详情&lt;/a&gt;&lt;/li&gt;
		&lt;li id="Tab2" class="Selected"&gt;&lt;a href="#" onclick="javascript:switchTab('TabPage1','Tab2'); "&gt;其他信息&lt;/a&gt;&lt;/li&gt;
		&lt;li id="Tab3"&gt;&lt;a href="#" onclick="javascript:switchTab('TabPage1','Tab3'); "&gt;出价记录&lt;/a&gt;&lt;/li&gt;
		&lt;li id="Tab4"&gt;&lt;a href="#" onclick="javascript:switchTab('TabPage1','Tab4'); "&gt;留言簿&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="HackBox"&gt;
		XXXXXXXX
	&lt;/div&gt;
&lt;/div&gt;
&lt;script language="JavaScript"&gt;//Switch Tab Effect 
function switchTab(tabpage,tabid) {
	var oItem = document.getElementById(tabpage);
	for(var i=0;i&lt;oItem.children.length;i++) {
		var x = oItem.children[i];
		x.className = "";
		var y = x.getElementsByTagName('a');
		y[0].style.color="#333333";
	}
	document.getElementById(tabid).className = "Selected";
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Hiker 's BLOG</title>

<style>

body {

font-size:12px;

font-family:宋体

}

ul.TabBarLevel1 {

list-style:none;

margin:0;

padding:0;

height:29px;

background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);

}

ul.TabBarLevel1 li {

float:left;

padding:0;

height:29px;

margin-right:1px;

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;

}

ul.TabBarLevel1 li a {

display:block;

line-height:29px;

padding:0 20px;

color:#333;

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;

white-space:nowrap;

}

ul.TabBarLevel1 li.Selected {

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;

}

ul.TabBarLevel1 li.Selected a {

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;

}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited {

color:#333;

}

ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active {

color:#F30;

text-decoration:none;

}

ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited {

color:#000;

}

ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active {

color:#F30;

text-decoration:none;

}

div.HackBox {

padding:2px 2px;

border-left:2px solid #6697CD;

border-right:2px solid #6697CD;

border-bottom:2px solid #6697CD;

}

</style>

</head>

<body>

</ul>

XXXXXXXX

</div>

function switchTab(tabpage,tabid) {

var oItem = document.getElementById(tabpage);

for(var i=0;i<oItem.children.length;i++) {

var x = oItem.children[i];

x.className = "";

var y = x.getElementsByTagName('a');

y[0].style.color="#333333";

}

document.getElementById(tabid).className = "Selected";

}

</script>

</body>

</html>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复