Change menu item color using javascript and jquery

Question

I have a function to change the color of my menu items on-click. This was working fine but somehow I broke it and cant figure out how.

The menu item color is not changing when clicked. There are no errors.

I'm testing on Chrome. It is not working in production nor on localhost.

I think I must be missing a jQuery script somewhere...Any ideas are appreciated...

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

Body:

        <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) The first time you run this code, pname will be undefined or empty.

2) you have an onclick handler, but the main logic of your code is not a function, so it will only run one time - and you're not observing the change of the sessionStorage1s value at all.

3) refactor your code to have the change logic in a function, and call that function in the changeactive fn too.

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

If you use addClass, the new class is added on top of the existing ones already applied to the element. So you might end up with "normal-item" and "active-item" on the same element. This might be causing the unexpected behaviour.

Suggest you use.css({class:"nav-link normal-item"}) or.css({class:"nav-link active-item"}) to make sure only one the applicable classes are added.