.net上tab样式菜单的实现

想要一个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>

解决方案 »

  1.   

       <div id="a" class="menu">
    <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>
      

  2.   

    不是这样的，不是鼠标移到上面变样式，而是我当前是那一页时，我的改选项卡突出。像这个里面的选项卡，每一个选项卡对应一个页面 当选中该选项卡进入该页面时，该选项卡的下面横线就没有了，表明我们在该选项页面中！http://www.stilbuero.de/jquery/tabs_3/rotate.html
      

  3.   

    横线是每个tab的边框，想看不到标签就设定边框宽度为0就行。
      

  4.   

    对啊，这个"on":"out"就是对应的选中和未选中的样式啊
    至于内容，再加一个DIV用脚本控制就行了
      

  5.   

    我还是发一个参考了多年的代码吧，没有背景图，字体选中会变白，改改颜色就行了
    <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>
      

  6.   

    大家 没有明白我的意思，我的这个每一个选项卡对用一个.net页面，而不是上面的一个div，div现在已经可以搞定，现在的问题是，进入该选项卡页面后该选项卡不突出，而其他的选项卡一样，上面得css已经实现了那个选项卡功能，只是如何让在当前页面时该选项卡 突出！
      

  7.   

    脚本！
    this.className = "current"
      

  8.   

    看样子需要传参数了！！搞个隐藏域  把点击选项卡的ID标记传递到下个页面。下个页面接受之后写到隐藏域。再用JS取到标记的ID让它突出！