实现类似IE7的Tab标签风格.效果如下:
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function GetTabContent(ulObj,content0,liObj,contentObj)
{
var menu=document.getElementById(ulObj).getElementsByTagName('li');
var list=document.getElementById(content0).getElementsByTagName('div');
for(var i=0;i<menu.length;i++)
{
document.getElementById('li'+i).className="hover";
list[i].style.display ="none";
}
document.getElementById(liObj).className ="here";
document.getElementById(contentObj).style.display ="block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<h3 id="example_title">
TAB 样式Demo</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<style type="text/css">
#tabnav
{
background: #d5d5d5;
border-bottom: 1px solid #333;
padding-bottom: 3px;
margin: 0 auto;
}
#tabnav ul
{
padding: 15px 0px 5px 0px;
margin: 5px 0px 5px 0px;
list-style: none;
background: #f1f1f1;
border-bottom: 1px solid #999;
line-height: 120%;
}
#tabnav ul li
{
display: inline;
margin-left: 10px;
}
#tabnav ul li a
{
background: #fff;
padding: 5px 10px 5px 10px;
border: 1px solid #999;
line-height: normal;
}
#tabnav ul li a:hover
{
background: #ccc;
color: #666;
}
#tabnav ul li a.here
{
background: #d5d5d5;
padding: 5px 10px 5px 10px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #d5d5d5;
color: #fff;
font-weight: bold;
}
#tabnav ul li a.here:hover
{
background: #d5d5d5;
}
</style>
<div id="tabnav">
<ul id="menu0">
<li><a id="li0" class="here" href="#" onclick ='GetTabContent("menu0","content0","li0","divContent0")'>
帝王槌</a></li>
<li><a id="li1" href="#" onclick ='GetTabContent("menu0","content0","li1","divContent1")'>
玉女枪法</a></li>
<li><a id="li2" href="#" onclick ='GetTabContent("menu0","content0","li2","divContent2")'>
黑沙刚体</a></li>
<li><a id="li3" href="#" onclick ='GetTabContent("menu0","content0","li3","divContent3")'>
不羁浪人枪</a></li>
</ul>
</div>
<div id="content0">
<div id="divContent0">
<h2>
帝王槌</h2>
<br />
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.
<br />
须发苍,气轩昂,三尺银狼,破风动八方.
<br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
</div>
<div id="divContent1">
<h2>
玉女枪法</h2>
<br />
曾经有个梦想：驰骋江湖，快意恩仇。<br />
曾经有份愿望：千里追凶，十步溅血。<br />
曾经有腔豪情：奇功盖世，名冠武林。<br />
曾经有种期盼：烛影摇红，衣袖添香。
</div>
<div id="divContent2">
<h2>
黑沙刚体</h2>
<br />
赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
<br />
十步杀一人，千里不留行。事了拂衣去，深藏身与名。<br />
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
<br />
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
<br />
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。<br />
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
</div>
<div id="divContent3">
<h2>
不羁浪人枪</h2>
<br />
素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br />
沙漠绿水涟，鱼游浅底，明眸一水天。<br />
爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br />
月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。
</div>
</div>
</form>
<script type="text/javascript">
GetTabContent("menu0","content0","li0","divContent0");
</script>
</body>
</html>
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function GetTabContent(ulObj,content0,liObj,contentObj)
{
var menu=document.getElementById(ulObj).getElementsByTagName('li');
var list=document.getElementById(content0).getElementsByTagName('div');
for(var i=0;i<menu.length;i++)
{
document.getElementById('li'+i).className="hover";
list[i].style.display ="none";
}
document.getElementById(liObj).className ="here";
document.getElementById(contentObj).style.display ="block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<h3 id="example_title">
TAB 样式Demo</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<style type="text/css">
#tabnav
{
background: #d5d5d5;
border-bottom: 1px solid #333;
padding-bottom: 3px;
margin: 0 auto;
}
#tabnav ul
{
padding: 15px 0px 5px 0px;
margin: 5px 0px 5px 0px;
list-style: none;
background: #f1f1f1;
border-bottom: 1px solid #999;
line-height: 120%;
}
#tabnav ul li
{
display: inline;
margin-left: 10px;
}
#tabnav ul li a
{
background: #fff;
padding: 5px 10px 5px 10px;
border: 1px solid #999;
line-height: normal;
}
#tabnav ul li a:hover
{
background: #ccc;
color: #666;
}
#tabnav ul li a.here
{
background: #d5d5d5;
padding: 5px 10px 5px 10px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #d5d5d5;
color: #fff;
font-weight: bold;
}
#tabnav ul li a.here:hover
{
background: #d5d5d5;
}
</style>
<div id="tabnav">
<ul id="menu0">
<li><a id="li0" class="here" href="#" onclick ='GetTabContent("menu0","content0","li0","divContent0")'>
帝王槌</a></li>
<li><a id="li1" href="#" onclick ='GetTabContent("menu0","content0","li1","divContent1")'>
玉女枪法</a></li>
<li><a id="li2" href="#" onclick ='GetTabContent("menu0","content0","li2","divContent2")'>
黑沙刚体</a></li>
<li><a id="li3" href="#" onclick ='GetTabContent("menu0","content0","li3","divContent3")'>
不羁浪人枪</a></li>
</ul>
</div>
<div id="content0">
<div id="divContent0">
<h2>
帝王槌</h2>
<br />
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.
<br />
须发苍,气轩昂,三尺银狼,破风动八方.
<br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
</div>
<div id="divContent1">
<h2>
玉女枪法</h2>
<br />
曾经有个梦想：驰骋江湖，快意恩仇。<br />
曾经有份愿望：千里追凶，十步溅血。<br />
曾经有腔豪情：奇功盖世，名冠武林。<br />
曾经有种期盼：烛影摇红，衣袖添香。
</div>
<div id="divContent2">
<h2>
黑沙刚体</h2>
<br />
赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
<br />
十步杀一人，千里不留行。事了拂衣去，深藏身与名。<br />
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
<br />
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
<br />
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。<br />
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
</div>
<div id="divContent3">
<h2>
不羁浪人枪</h2>
<br />
素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br />
沙漠绿水涟，鱼游浅底，明眸一水天。<br />
爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br />
月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。
</div>
</div>
</form>
<script type="text/javascript">
GetTabContent("menu0","content0","li0","divContent0");
</script>
</body>
</html>
