Css 为什么赢了'；我的导航栏的当前页面是否保持高亮显示？_Css_Asp.net Mvc_Razor_Navigation

Css 为什么赢了'；我的导航栏的当前页面是否保持高亮显示？

css asp.net-mvc razor navigation

Css 为什么赢了'；我的导航栏的当前页面是否保持高亮显示？,css,asp.net-mvc,razor,navigation,Css,Asp.net Mvc,Razor,Navigation,我已经阅读了很多论坛，并尝试了许多不同的方法使我的导航菜单的当前页面保持突出显示，但我不明白为什么它不起作用。我不想使用Javascript或只使用PHP的CSS 这就是我对HTML的理解： <body id="@ViewBag.IDTag"> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<

我已经阅读了很多论坛，并尝试了许多不同的方法使我的导航菜单的当前页面保持突出显示，但我不明白为什么它不起作用。
我不想使用Javascript或只使用PHP的CSS

这就是我对HTML的理解：

    <body id="@ViewBag.IDTag">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> { { "id", "homenav" } })</li>
            <li>@Html.ActionLink("What Is EDI?", "WhatIsEDI", "Home", null, new Dictionary<string, object> { { "id", "whatisedinav" } })</li>
            <li>@Html.ActionLink("Bills of Lading", "Index", "Bills_of_Lading", null, new Dictionary<string, object> { { "id", "billsofladingnav" } })</li>
            <li>@Html.ActionLink("Issues & Solutions", "Index", "Issues_and_Solutions", null, new Dictionary<string, object> { { "id", "issuesandsolutionsnav" } })</li>
            <li>@Html.ActionLink("Partners", "Index", "Partners", null, new Dictionary<string, object> { { "id", "partnersnav" } })</li>
            <li>@Html.ActionLink("Locations", "Index", "Locations", null, new Dictionary<string, object> { { "id", "locationsnav" } })</li>
            <li>@Html.ActionLink("Refineries", "Index", "Refineries", null, new Dictionary<string, object> { { "id", "refineriesnav" } })</li>
            <li>@Html.ActionLink("Sources", "Index", "Sources", null, new Dictionary<string, object> { { "id", "sourcesnav" } })</li>
            <li>@Html.ActionLink("Transfer Criteria", "Index", "Transfer_Criteria", null, new Dictionary<string, object> { { "id", "transfercriterianav" } })</li>
            <li>@Html.ActionLink("Transportation Methods", "Index", "Transportation_Methods", null, new Dictionary<string, object> { { "id", "transportationmethodsnav" } })</li>
            <li>@Html.ActionLink("Rack to Partner Mappings", "Index", "Rack_to_Partner_Mappings", null, new Dictionary<string, object> { { "id", "racktopartnermappingsnav" } })</li>
            <li>@Html.ActionLink("Products", "Index", "Products", null, new Dictionary<string, object> { { "id", "productsnav" } })</li>                    
        </ul>
    </body>

这就是我的CSS的外观：

    ul#menu             
    {
        font-size: .8em;
        font-weight: 600;
        color: #FFF;
        float: left;
        width: 130px;
        list-style-type: none;
        margin-top: 133px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        padding: 0; 
    }

    ul#menu a:link, ul#menu a:visited
    {
        display:block;
        font-weight:bold;
        color: #FFF;
        background-color: rgb(139,177,216);
        width: 120px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
        text-transform: uppercase;
    }

    ul#menu a:hover, ul#menu a:active
    {
        background-color: #365f87;
    }

body#home a#homenav, 
body#whatisedi a#whatisedinav,
body#billsoflading a#billsofladingnav,
body#issuesandsolutions a#issuesandsolutionsnav,
body#partners a#partnersnav, 
body#locations a#locationsnav, 
body#refineries a#refineriesnav,
body#sources a#sourcesnav,
body#transfercriteria a#transfercriterianav,
body#transportationmethods a#transportationmethodsnav,
body#racktopartnermappings a#racktopartnermappingsnav,
body#products a#productsnav     
{
    background-color: #365f87;          /* highlights current page */
    text-transform: lowercase;
    cursor:default;
}

我对所有这些都不熟悉，所以这可能只是一个语法问题，或者在应该是“div”时调用“body”，或者在应该是“class”时调用“id”。我现在的处境是，我所做的一切都不会有任何改变。任何帮助都将不胜感激。

请尝试此问题所使用的方法。它使流程更具动态性，您编写的代码更少

您需要将活动类添加到

中。我不知道

asp.net

，但当您动态设置

的id时，我认为类似的方法会起作用：

我的PHP版本

//带有一个函数
功能处于活动状态（主体ID、标识符）{
回显标识符==bodyID？'active'：''；
}
您需要在body
和#
之间留出一个空格，否则您将在#后面显示一个body标记，其中包含所有这些字符串的id。在我看来，我只需要在当前的导航元素中添加一个类，添加空格并没有改变任何事情。向当前导航元素添加一个类是什么意思？请看我作为答案发布的链接。这是一个更好的方法来处理这种情况。好吧-显然是空间修复了一切。奇怪的谢谢大家的帮助。
    ul#menu             
    {
        font-size: .8em;
        font-weight: 600;
        color: #FFF;
        float: left;
        width: 130px;
        list-style-type: none;
        margin-top: 133px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        padding: 0; 
    }

    ul#menu a:link, ul#menu a:visited
    {
        display:block;
        font-weight:bold;
        color: #FFF;
        background-color: rgb(139,177,216);
        width: 120px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
        text-transform: uppercase;
    }

    ul#menu a:hover, ul#menu a:active
    {
        background-color: #365f87;
    }

body#home a#homenav, 
body#whatisedi a#whatisedinav,
body#billsoflading a#billsofladingnav,
body#issuesandsolutions a#issuesandsolutionsnav,
body#partners a#partnersnav, 
body#locations a#locationsnav, 
body#refineries a#refineriesnav,
body#sources a#sourcesnav,
body#transfercriteria a#transfercriterianav,
body#transportationmethods a#transportationmethodsnav,
body#racktopartnermappings a#racktopartnermappingsnav,
body#products a#productsnav     
{
    background-color: #365f87;          /* highlights current page */
    text-transform: lowercase;
    cursor:default;
}

// with a function

function is_active_li( bodyID, identifier ) {
     echo identifier == bodyID ? 'active' : '';
}

<li class="<?php is_active_li( $bodyID, 'home'); ?>">Home</li>
<li class="<?php is_active_li( $bodyID, 'whatisedi'); ?>">Home</li>
<li class="<?php is_active_li( $bodyID, 'billsoflading'); ?>">Home</li>

// or all inline

<li class="<?php echo 'homev' == bodyID ? 'active' : ''; ?>">Home</li>
<li class="<?php echo 'whatisedi' == bodyID ? 'active' : ''; ?>">Home</li>
<li class="<?php echo 'billsoflading' == bodyID ? 'active' : ''; ?>">Home</li>