Question

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

我是所有这一切的新手，所以它可能只是一个语法问题，或者当它应该是“class”时应该是“div”或“id”时调用“body”。我正处于我没有尝试过的任何事情上。任何帮助将不胜感激。

Answer 1

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

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

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

为什么导航栏的当前页面不会突出显示？

2 个答案: