最佳的技術來添加所選類別列出

如果在Site.Master文件中，我們有一些像最佳的技術來添加所選類別列出

<div id="menu-container"> 
    <ul id="menu"> 
     <li> 
      <%: Html.ActionLink("Frontpage", "Index", "Home")%></li> 
     <li> 
      <%: Html.ActionLink("Content", "Index", "Content")%></li> 
     <li> 
      <%: Html.ActionLink("Winners", "Index", "Winners")%></li> 
     <li> 
      <%: Html.ActionLink("Users", "Index", "Users")%></li> 
     <li> 
      <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li> 
     <li> 
      <%: Html.ActionLink("Help", "Help", "Home")%></li> 
    </ul> 
    <ul id="publish"> 
     <li> 
      <%: Html.ActionLink("Preview", "Index", "Preview")%></li> 
    </ul> 
</div>

，我們希望，在正確的class="selected"屬性設置爲右<li>這將是最好的方式，每個內容頁？

目前我使用：

<% string url = Page.Request.Url.AbsoluteUri.ToString(); %> 
<ul id="menu"> 
    <li <% if (url.Contains("/Home")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Frontpage", "Index", "Home")%></li> 
    <li <% if (url.Contains("/Content")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Content", "Index", "Content")%></li> 
    <li <% if (url.Contains("/Winners")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Winners", "Index", "Winners")%></li> 
    <li <% if (url.Contains("/Users")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Users", "Index", "Users")%></li> 
    <li <% if (url.Contains("/Statistics")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li> 
    <li <% if (url.Contains("/Home/Help")) { Response.Write("class='selected'"); } %>> 
     <%: Html.ActionLink("Help", "Help", "Home")%></li> 
</ul>

，但我不認爲這是最好的辦法。

感謝所有幫助

來源

2010-10-27 balexandre

你冷把所有的字符串列表中的對象（匿名或鍵入）和環路上。

然後，你只需要一個LI代碼塊，但對於這麼小的列表，它可能會很多。

另一種解決方案是使用jQuery客戶端來設置它。向每個與您想要匹配的值相對應的LI添加一個ID或類，然後添加客戶端腳本，該腳本要麼獲取location.url，要麼添加不適用的客戶端腳本，並使用存儲了url的隱藏字段進行匹配。

來源

2010-10-27 19:36:47

我發現實現目標的最簡單方法是在頁面主體中添加一個類，以便通過母版頁中的代碼識別當前哪個頁面是最新的。然後，在CSS，你可以做這樣的事情：

#menu li { /* Styles for unselected menu items */ } 

body.home #menu li.home, 
body.content #menu li.content, 
body.winners #menu li.winners 
{ 
    /* Styles for selected menu items */ 
}

這樣，你也可以很容易地添加與您正在查看哪個頁面其他顯示邏輯。

編輯：

您可以通過訪問ASP.NET變量輸出頁面時檢測當前的URL，因此，如果菜單在母版頁定義它不應該的問題。例如：

<% var convertedUrl = Request.Url.ToString().ToLower().Replace('/', '-'); %> 
<body class="<%= convertedUrl %>"> 
    <!-- Rest of page --> 
</body>

如果您位於URL「About/Company」，這會將「about-company」類放在您的正文中。

來源

2010-10-27 19:41:13 Jacob

這是一個不錯的主意，乾淨，簡單:)謝謝你的擡頭 – balexandre 2010-10-28 06:46:57

菜單是在主...所以它永遠不會工作。 – balexandre 2010-10-28 15:30:48

請參閱我的更新以瞭解如何在母版頁中執行此操作。 – Jacob 2010-10-28 17:08:58

最佳的技術來添加所選類別列出

回答

相關問題