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

Question

我有一个功能可以在点击时更改我的菜单项的颜色。这工作正常，但不知何故我把它弄坏了，不知道怎么弄。

单击时菜单项颜色不变。没有错误。

我正在 Chrome 上进行测试。它在生产环境和本地主机上都不起作用。

我想我一定是在某处遗漏了一个 jQuery 脚本...任何想法都值得赞赏...

标题：

        <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 处理程序，但你的代码的主要逻辑不是一个函数，所以它只会运行一次 - 而且你根本没有观察到 sessionStorage1s 值的变化。

3) 重构代码以在函数中包含更改逻辑，并在 changeactive fn 中调用该函数。

$(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

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

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

Answer 3

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