使用 javascript 和 jquery 更改菜单项颜色

Question

我有一个 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;
    }

})

Answer 1

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();
}


});

Answer 2

<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;
        }
      }
    });

Answer 3

如果使用 addClass，则新的 class 将添加到已应用于元素的现有 class 之上。 因此，您最终可能会在同一元素上使用“normal-item”和“active-item”。 这可能会导致意外行为。

建议您使用.css({class:"nav-link normal-item"}) 或.css({class:"nav-link active-item"}) 确保只添加一个适用的类。