.net 中 tabs 样式 的 菜单 如何做 啊....

Question

http://hi.csdn.net/attachment/201001/29/19291_1264769561EAS6.jpg
就像上面的这种菜单，每一个选项对应一个.net页面,当你在第一页面时，其他的选项为正常颜色，当你转到第二页页面时，第二个页面显示为选中项，而第一个页面恢复正常。

Answer 1

设置flag 当点击下一个tab时候上一个tab的flag值变成false

Answer 2

1 你可以自己写，用js控制css样式，鼠标放上去时候，让当前面板的样式发生变化，显示当前面板，隐藏其他面板，就OK了，比如js这么写
  function chukou(num)
{  var zhi = document.getElementById("tjbottom");
  var fu = document.getElementById("tjbottom1");
      if(num==1)
    {
      zhi.style.display="";
      fu.style.display="none";
       showzhi.className = "tj1";
      showfu.className = "tj2";
    }
      if(num==2)
    {
      zhi.style.display="none";
      fu.style.display="";
       showzhi.className = "tj2";
      showfu.className = "tj1";
}
}
2 你可以直接用jquery的jquery.ui.tab插件

Answer 3

给你个代码看看
<div class="";">
                <div class="menuT_sn" id="mt_1">
                    <a href="1.aspx" class="TLink">111</a></div>
                <div class="menuT_sn" id="mt_2">
                    <a href="2.aspx" class="TLink">222</a></div>
                <div class="menuT_sn" id="mt_3">
                    <a href="3.aspx" class="TLink">333</a></div>
                <div class="menuT_sn" id="mt_4">
                    <a href="4.aspx" class="TLink">444</a></div>
                <div class="menuT_sn" id="mt_5">
                    <a href="5.aspx" class="TLink">555</a></div>
                <div class="menuT_sn" id="mt_6">
                    <a href="6.aspx" class="TLink">666</a></div>
                <div class="menuT_sn" id="mt_7">
                    <a href="7.aspx" class="TLink">777</a></div>
                <div class="menuT_sn" id="mt_8">
                    <a href="8.aspx" class="TLink">888</a></div>
            </div>只是标签的代码，所有的class都是一样的，也就是说样式也是一样的然后在每个页面加一个JavaScript代码，用来改变标签div的class，也就是样式，实现效果的不同
 
function GetMTCss(obj)
    {
        document.getElementById("mt_1").className='menuT_sy';
    }

Answer 4

.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>这个菜单是放在母板页里的，谁能帮我修改修改.曾经发布到 css版块竟然没有人能修改！

Answer 5

放到母版页不是不行，是因为js代码中的getElementById("xxx")获取的id就不对了，母版页中的控件id在前台html显示时会被加上一些有关母版页的标记。我可能说的不是很明白额。举个例子在母版页中有<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>这样一个控件，然后运行那个使用该母版页的页面，你会发现，这个控件发送到浏览器的html文件，变成了<input name="ctl00$TextBox1" type="text" id="ctl00_TextBox1" />，它的id和name前面都加上了一个ct100，这就是该母版页的标记，自己理解下吧。css那些懒的看了，css我看不太进去，水平也不行，看不太懂，只能帮你这些了，呵呵