如何实现动态导航栏-正在浏览的页面导航栏高亮？

Question

菜单是用repeater,           <div id="navigation">
               <ul>
         <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate >
                  <li><a href ='<%#DataBinder.Eval(Container,"DataItem.Url")%>'> <%#DataBinder.Eval(Container,"DataItem.ClassName")%></a></li>
         </ItemTemplate>
         </asp:Repeater>
               </ul>
         </div>#navigation ul li a#active {
background: url(../images/navigation-active.gif);
color: #a21 !important;
font-weight: bold;
}如果在li加上id区分active的连接，但是因为是repearter，他把所有的菜单都repeat成同一个id，结果导致全部菜单都是高亮了。我要怎么控制只有当前浏览页菜单才高亮啊~

Answer 1

我有个思路，可以把所有可能变亮的区域都作成panel然后使用document.panel.style控制样式

Answer 2

 
如果静态的话，我知道可以用选择器来实现，而且很简单。但是现在是动态菜单，是绑定了repeater来作菜单，所以不知道如何控制啊。

Answer 3

<ul>
    <asp:Repeater ID="Repeater1" runat="server" OnDataBinding="Repeater1_DataBinding">
        <ItemTemplate>
            <li>
                <asp:Panel ID="panIndex" runat="server">
                    <a href='<%# DataBinder.Eval(Container,"DataItem.Url") %>'>
                        <% #DataBinder.Eval(Container,"DataItem.ClassName") %>
                    </a>
                </asp:Panel>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>protected void Repeater1_DataBinding(object sender, EventArgs e)
{
    Panel myPan = (Panel)Repeater1.Items[(int)你想要高亮的行的索引].FindControl("panIndex");
    myPan.CssClass = "active ";
}然后active中扩展<div>中<a>的样式

Answer 4

弄错...不要在DataBinding中写这个 就在Repeater1数据绑定后的位置写
<ul>
    <asp:Repeater ID="Repeater1" runat="server" OnDataBinding="Repeater1_DataBinding">
        <ItemTemplate>
            <li>
                <asp:Panel ID="panIndex" runat="server">
                    <a href='<%# DataBinder.Eval(Container,"DataItem.Url") %>'>
                        <% #DataBinder.Eval(Container,"DataItem.ClassName") %>
                    </a>
                </asp:Panel>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>...
Repeater1.DataBind();Panel myPan = (Panel)Repeater1.Items[(int)你想要高亮的行的索引].FindControl("panIndex");
myPan.CssClass = "active ";
...或者你可以把<a>...</a>换成LinkButton，通过上面的方法加样式

Answer 5

这样应该也可以:
<asp:Repeater ID="Repeater1" runat="server" OnPreRender="Repeater1_PreRender">
        <ItemTemplate>
            <asp:Literal ID="Literal1" runat="server" Text='<%# formUrl(Eval("Url"),Eval("ClassName")) %>'></asp:Literal>        
         </ItemTemplate>
        </asp:Repeater>    public string formUrl(object Url, object ClassName)
    {
        string curPageName = HttpContext.Current.Request.Url.Segments[HttpContext.Current.Request.Url.Segments.Length - 1];
        if (Url.ToString().ToLower() == curPageName.ToLower())
        {
            return "<li><a href=\"" + Url.ToString() + "\"><font color=\"red\">" + ClassName.ToString() + "</font></a>";
        }
        else
        {
            return "<li><a href=\"" + Url.ToString() + "\">" + ClassName.ToString() + "</a>";
        }
    }

Answer 6

Repeater 方式来做 较麻烦 没有尝试过 不过应该是有方法的我想如果一定要这样做 你试试
在
<li id="唯一">
或
<a id="唯一" href ='<%#DataBinder.Eval(Container,"DataItem.Url")%>'> <%#DataBinder.Eval(Container,"DataItem.ClassName")%></a>
生成一个唯一的标识 根据标识用css控制是否高亮
如果你是直接在页面中这样绑定的话比较难做到 生成唯一标识 建议：写一个cs类在类中指定
<ItemTemplate >
<li><a href ='<%#DataBinder.Eval(Container,"DataItem.Url")%>'> <%#DataBinder.Eval(Container,"DataItem.ClassName")%></a></li>
</ItemTemplate>
这段代码 这样就可以生成一个唯一的标识了

Answer 7

上述方法比较麻烦 我记得孟子e章的书里介绍过Repeater 中放入值 他们的clientid会有唯一标识的 你试试看生成出来的代码中有没有 如果有就好办了 直接用样式控制就可以了

Answer 8

http://blog.morock.net/article.asp?id=77这里看到一篇文章：4. 当前菜单高亮显示如果高亮当前页面，这个有很多种做法，最死板的是在每个页面上显式的定义类。 
但是对于web项目来说，页面多数是动态的，所以这样不是最理想的方法。我这里采用的方法是CSS选择器的灵活使用 代码
#attendance #attendanceNavg,    
#teach #teachNavg,    
#communication #communicationNavg,    
#system #systemNavg {    
    background: url(../images/tab_right_on.gif) no-repeat right top;    
}    
#attendance #attendanceNavg A,    
#teach #teachNavg A,    
#communication #communicationNavg A,    
#system #systemNavg A {    
    background: url(../images/tab_left_on.gif) no-repeat left top;    
    color: #0000ff;    
}    
 在<div id="attendance" class="mainNavg">的代码中，我们可以使用不同的id作为选择器，由于CSS中的选择器id的优先级将大于class，所以只要根据id配合上li上面的id，就可以达到动态选择高亮选中的目的。事实上，由于我们的页面都是动态的，所以id可以由后台生成，这样就可以通过id的不同组合非常精巧的实现了我们的需求。他说了：“页面多数是动态的，所以这样不是最理想的方法。我这里采用的方法是CSS选择器的灵活使用”然后下面写的那些代码，明明就是CSS选择器方法来实现，也是静态菜单才能实现。看不明白。

Answer 9

终于搞定了。 利用id > class 
把主ul id改成class，参考ndaysun朋友，把需要高亮的li用函数判断给他命名id=activer,css中写#activer的样式。
我把方法写出来，需要的朋友可以参考，
++++++++++++++++css++++++++
.navigation {
background: url(../images/navigation-bg.png);
height: 38px;
width :1003px;
overflow: hidden;
line-height: 2em;
}.navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 970px;
}.navigation ul li {
background: none;
display: inline;
float: left;
list-style-type: none;
padding: 0;
}.navigation ul li a {
color: #666;
display: block;
height: 25px;
overflow: hidden;
padding: 5px 15px 0 15px;
text-decoration: none !important;
}* html .navigation ul li a {
float: left;
}.navigation ul li a:hover {
color: #fff !important;#activer {
background: url(../images/navigation-active.gif);
color: #a21 !important;
font-weight: bold;
}++++++++++++++++++++++++++++++++++aspx页面+++
          <div class="navigation">
               <ul>
         <asp:Repeater ID="Menu" runat="server">
         <ItemTemplate >
                  <li <%#getCss(DataBinder.Eval(Container,"DataItem.Url"))%>><a href ='<%#DataBinder.Eval(Container,"DataItem.Url")%>'> <%#DataBinder.Eval(Container,"DataItem.ClassName")%></a></li>
         </ItemTemplate>
         </asp:Repeater>
               </ul>
         </div>
+++++++++++++++++++++++++++++++++++++++++++++后台代码+++
    Public Function getCss(ByVal Url As Object) As String
        Dim curPageName As String = HttpContext.Current.Request.Url.Segments(HttpContext.Current.Request.Url.Segments.Length - 1)
        If Url.ToString.ToLower = curPageName.ToLower Then
            Return "id='activer'"
        Else
            Return Nothing
        End If
    End Function非常感谢大家