想要一个TAB样式的菜单,现在已经用CSS写了一个菜单样式,可还有一个问题没有解决,就是在当前页时,对应的选项没有突出。对JS 不熟为高人帮忙完善一下。不甚感激。
.menu /*菜单样式*/
{
border-left-color:#005EAC;
border-left-width:1px;
border-left-style:solid;
border-right-color:#005EAC;
border-right-width:1px;
border-right-style:solid;
border-bottom-color:#32A1FC;
border-bottom-width:1px;
border-bottom-style:solid;
width:918px;
height:25px;
background-image:url(./../Images/login.gif);
}
.menu ul{list-style:none;}
.menu li{float:left;width:100px;background:url(./../Images/004.gif);margin-left:3px;line-height:25px;font-size:13px;}
.menu a{display:block;text-align:center;height:25px; }
.menu a:link{color:#FFF;background:url(./../Images/004.gif) #CCC;text-decoration:none;}
.menu a:visited{color:#00FF36;text-decoration:none;}
.menu a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(./../Images/002.gif);}
<div class="menu">
<ul>
<li><a href="AAAAAAA.aspx">AAAAAAA</a></li>
<li><a href="BBBBBBB.aspx">BBBBBBB</a></li>
<li><a href="CCCCCCC.aspx">CCCCCCC</a></li>
</ul>
</div>
.menu /*菜单样式*/
{
border-left-color:#005EAC;
border-left-width:1px;
border-left-style:solid;
border-right-color:#005EAC;
border-right-width:1px;
border-right-style:solid;
border-bottom-color:#32A1FC;
border-bottom-width:1px;
border-bottom-style:solid;
width:918px;
height:25px;
background-image:url(./../Images/login.gif);
}
.menu ul{list-style:none;}
.menu li{float:left;width:100px;background:url(./../Images/004.gif);margin-left:3px;line-height:25px;font-size:13px;}
.menu a{display:block;text-align:center;height:25px; }
.menu a:link{color:#FFF;background:url(./../Images/004.gif) #CCC;text-decoration:none;}
.menu a:visited{color:#00FF36;text-decoration:none;}
.menu a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(./../Images/002.gif);}
<div class="menu">
<ul>
<li><a href="AAAAAAA.aspx">AAAAAAA</a></li>
<li><a href="BBBBBBB.aspx">BBBBBBB</a></li>
<li><a href="CCCCCCC.aspx">CCCCCCC</a></li>
</ul>
</div>
<ul>
<li onmouseover="nav('a',0)"><a href="AAAAAAA.aspx">AAAAAAA</a></li>
<li onmouseover="nav('a',1)"><a href="BBBBBBB.aspx">BBBBBBB</a></li>
<li onmouseover="nav('a',2)"><a href="CCCCCCC.aspx">CCCCCCC</a></li>
</ul>
</div><script>
function nav(m,n)
{
var list = document.getElementById(m).getElementsByTagName("li");
for(var i = 0; i < list.length; i++)
{
list[i].className = i==n ?"on":"out";
}
}
</script>
至于内容,再加一个DIV用脚本控制就行了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡菜单</title>
<style type="text/css">
.bg{background:url(MenuLine.gif) repeat; height:30px; width:328px; line-height:30px}
ul{list-style-type:none; margin:0; padding:0; font-size:14px}
ul li{float:left; width:82px; text-align:center}
.mouseon{background:url(Menu.gif) no-repeat; font-weight:bold; color:#FFFFFF}
.mouseout{font-weight:normal}
#content0,#content1{width:326px!important; width:328px; height:200px; border:1px solid #dcefe1}
h2{margin:0; padding:0}
</style>
<script language="javascript">
function Tab(m,n)
{
var menu=document.getElementById('menu'+m).getElementsByTagName('li');
var list=document.getElementById('content'+m).getElementsByTagName('div');
for(var i=0;i<menu.length;i++)
{
menu[i].className=i==n?"mouseon":"mouseout";
list[i].style.display=i==n?"block":"none";
}
}
</script>
<body>
<div id="menu0" class="bg">
<ul>
<li class="mouseon" onMouseOver="Tab(0,0)">选项1</li>
<li class="mouseout" onMouseOver="Tab(0,1)">选项2</li>
<li class="mouseout" onMouseOver="Tab(0,2)">选项3</li>
<li class="mouseout" onMouseOver="Tab(0,3)">选项4</li>
</ul>
</div>
<div id="content0">
<div style="display:block">
<h2>帝王槌</h2><br/>
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光. <br />
须发苍,气轩昂,三尺银狼,破风动八方. <br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
</div>
<div style="display:none">
<h2>玉女枪法</h2><br/>
曾经有个梦想:驰骋江湖,快意恩仇。<br />
曾经有份愿望:千里追凶,十步溅血。<br />
曾经有腔豪情:奇功盖世,名冠武林。<br />
曾经有种期盼:烛影摇红,衣袖添香。
</div>
<div style="display:none">
<h2>黑沙刚体</h2><br/>
赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。
十步杀一人,千里不留行。事了拂衣去,深藏身与名。
闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。
三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。
救赵挥金锤,邯郸先震惊。千秋二壮士,烜赫大梁城。
纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。
</div>
<div style="display:none">
<h2>不羁浪人枪</h2><br/>
素手相牵,斜辉入眼帘,一轮逍遥自在间,醉了山水闲。<br />
沙漠绿水涟,鱼游浅底,明眸一水天。<br />
爱在村友相谈,开心点点,笑语连连,率性夜无眠。<br />
月在西边,风乱星寒,辗转醇香旧事,蛾儿曼舞灯前。
</div>
</div>
this.className = "current"