<html>
<head>
<title>一個不錯的網頁導航源碼</title>
<style>
ul.TabBar
{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBar 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.TabBar 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.TabBar li.Selected
{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBar li.Selected a
{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
ul.TabBar li a:link,ul.TabBar li a:visited
{
color:#333;
}
ul.TabBar li a:hover,ul.TabBar li a:active
{
color:#F30;
text-decoration:none;
}
ul.TabBar li.Selected a:link,ul.TabBar li.Selected a:visited
{
color:#000;
}
ul.TabBar li.Selected a:hover,ul.TabBar li.Selected a:active
{
color:#F30;
text-decoration:none;
}
div.HackBox
{
padding : 0px 0px ;
margin-top:0px;
border-left: 1px solid #6697CD;
border-right: 1px solid #6697CD;
border-bottom: 1px solid #6697CD;
height:80px;
}
</style>
<script language="JavaScript" type="text/javascript">
//交換選項效果
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>
</head>
<body style="font-size:12px;">
<div id="Whatever">
<ul class="TabBar" id="TabPage">
<li id="Tab1" class="Selected"><a href="#" onMouseOver="switchTab('TabPage','Tab1');">最新求購</a></li>
<li id="Tab2"><a href="#" onMouseOver="switchTab('TabPage','Tab2');">最新供應</a></li>
<li id="Tab3"><a href="#" onMouseOver="switchTab('TabPage','Tab3');">最新加盟</a></li>
<li id="Tab4"><a href="#" onMouseOver="switchTab('TabPage','Tab4');">新聞資訊</a></li>
</ul>
<div class="HackBox"></div>
</div>
</body>
</html>