Лучший способ добавить выбранный класс в список - PullRequest
Новая
       0

Лучший способ добавить выбранный класс в список

0 голосов
/ 27 октября 2010

, если в файле 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>

, но я не думаю, что это лучший подход.

Спасибо за любую помощь

Ответы [ 2 ]

1 голос
/ 27 октября 2010

Самый простой способ, который я нашел для достижения вашей цели, - это добавить класс в тело вашей страницы, определяющий, какая страница является текущей с помощью кода на главной странице. Затем в 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 */
}

Таким образом, вы также можете легко добавить другую логику отображения, связанную с просматриваемой страницей.

Edit:

Вы можете определить текущий URL при выводе страницы через доступ к переменным ASP.NET, поэтому не должно иметь значения, определено ли меню на главной странице. Например: 

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

Это поместит класс "about-company" в ваше тело, если вы перейдете по URL "About / Company."

0 голосов
/ 27 октября 2010

Вы помещаете всю строку в объект списка (анонимный или набранный) и зацикливаетесь.

Тогда вам потребуется только один блок кода LI, но для такого маленького списка это может быть слишком много.

Другим решением будет использование клиентской стороны jQuery для его установки.Добавьте идентификатор или класс для каждого LI, соответствующего значению, с которым вы хотите сопоставить, и затем добавьте клиентский скрипт, который либо получает location.url, либо, если это не применимо, использует скрытое поле, в котором вы сохранили URL для сопоставления.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...