簡體   English   中英

使用 javascript 和 jquery 更改菜單項顏色

[英]Change menu item color using javascript and jquery

我有一個 function 可以單擊更改菜單項的顏色。 這工作正常,但不知何故我把它弄壞了,不知道怎么弄。

單擊時菜單項顏色不會改變。 沒有錯誤。

我正在 Chrome 上進行測試。 它不適用於生產或本地主機。

我想我一定在某處缺少 jQuery 腳本......任何想法都值得贊賞......

Header:

        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="~/css/style.css" />

身體:

        <div class="navbar-collapse collapse">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item" onclick="changeactive('Home')">
                    <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">@_loc[Model.NavBarHome]</a>
                </li>
                <li class="nav-item" onclick="changeactive('Features')">
                    <a class="nav-link" asp-area="" asp-controller="Features" asp-action="Features">@_loc[Model.NavBarFeatures]</a>
                </li>
        </div>

CSS:

.normal-item {
    color: green !important;
}
.active-item {
    color: rgba(255, 140, 0, 0.781) !important
}

JS:

function changeactive(pname) {

    Debug.writeln("hello");

    sessionStorage.setItem("activepage", pname);
}

$(function () {
    var pname = sessionStorage.getItem("activepage");

    switch (String(pname)) {
        case "Home":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("active-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
            break;
        case "Features":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("active-item");
            break;
        default:
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
            break;
    }

})

1) 第一次運行此代碼時,pname 將未定義或為空。

2)你有一個 onclick 處理程序,但你的代碼的主要邏輯不是 function,所以它只會運行一次 - 你根本沒有觀察到 sessionStorage1s 值的變化。

3)重構您的代碼以在 function 中具有更改邏輯,並在 changeactive fn 中調用該 function。

$(function () {

function updateUI()
{

    var pname = sessionStorage.getItem("activepage");

    switch (String(pname)) {
        case "Home":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("active-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
            break;
        case "Features":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("active-item");
            break;
        default:
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
            break;
    }
}

function changeactive(pname) {

    Debug.writeln("hello");

    sessionStorage.setItem("activepage", pname);
    updateUI();
}


});
<div class="navbar-collapse collapse">
    <ul class="navbar-nav flex-grow-1">
      <li class="nav-item">
        <a class="nav-link" data-pname="Home" asp-area="" asp-controller="Home"
          asp-action="Index">@_loc[Model.NavBarHome]</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-pname="Features" asp-area="" asp-controller="Features"
          asp-action="Features">@_loc[Model.NavBarFeatures]</a>
      </li>
  </div>
$(function () {
      var navBar = $('.navbar-nav');
      navBar.on('click', function (e) {
        var pname = e.target.dataset['pname'];
        changeactive(pname);
      })
      function changeactive(pname) {
        switch (String(pname)) {
          case "Home":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('normal-item').addClass("active-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('active-item').addClass("normal-item");
            break;
          case "Features":
            $("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('active-item').addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('normal-item').addClass("active-item");
            break;
          default:
            $("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('active-item').addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('active-item').addClass("normal-item");
            break;
        }
      }
    });

如果使用 addClass,則新的 class 將添加到已應用於元素的現有 class 之上。 因此,您最終可能會在同一元素上使用“normal-item”和“active-item”。 這可能會導致意外行為。

建議您使用.css({class:"nav-link normal-item"}) 或.css({class:"nav-link active-item"}) 確保只添加一個適用的類。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM