为什么我的导航栏的当前页面不会保持突出显示？答案

【问题标题】：Why won't the current page of my navigation bar stay highlighted?为什么我的导航栏的当前页面不会保持突出显示？
【发布时间】：2013-07-05 02:21:28
【问题描述】：

我已经阅读了很多论坛并尝试了许多不同的方法来使我的导航菜单的当前页面保持突出显示，但我不知道为什么它不起作用。
我不想使用 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>

在每个视图中，我在页面顶部都有 id。主页的一个例子是：

    @{
        ViewBag.IDTag = "home";
    }

这是我的 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”。我正处于我尝试过的任何事情都没有产生任何影响的地步。任何帮助将不胜感激。

【问题讨论】：

您需要在body 和# 之间放置一个空格，否则您说的是# 之后所有这些字符串的正文标签和ID。 IMO 我只会向当前的导航元素添加一个类。
添加空间并没有改变任何东西。向当前导航元素添加单个类是什么意思？
看看我作为答案发布的链接。这是处理这种情况的更好方法。
好吧——显然是这个空间解决了所有问题。诡异的。感谢大家的帮助。

标签： css asp.net-mvc razor navigation

【解决方案1】：

试试这个问题的方法。它使流程更加动态，并且您编写的代码更少。

Adding "active" tag to navigation list in an asp.net mvc master page

【讨论】：

【解决方案2】：

您需要将活动课程添加到您的<li>。我不知道asp.net，但是当您动态设置<body> 的ID 时，我认为这样的事情会起作用：

我的 PHP 版本

// 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>

【讨论】：