I have a strange problem. In my PHP/HTML program I am able to use JQUERY, but I cannot use JQUERY to modify attributs of elements.

The click, val and submit functions work fine, but the addClass, removeClass and attr functions don't!

$('#mVote').click(function() {
  alert("Vote");
  $("a.active").each(function() {
    $(this).removeClass("active");
  })
  $('#mVote').addClass("active");
  $('#mVote').attr("test", "test");
  $("#mMode").val("vote");
  $("#menu").submit();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Abstimmung</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <form id="menu" method="POST">
        <input type="hidden" id="mMode" name="mode">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a id="mVote" class="nav-link mItem" aria-current="page" href="#">Abstimmung</a>
          </li>
          <li class="nav-item">
            <a id="mLogout" class="nav-link mItem" aria-current="page" href="#">Abmelden</a>
          </li>
          <li class="nav-item">
            <a id="mUser" class="nav-link mItem" aria-current="page" href="#">Benutzerdaten</a>
          </li>
          <li class="nav-item">
            <a id="mCharts" class="nav-link mItem" aria-current="page">Edit Charts</a>
          </li>
          <li class="nav-item">
            <a id="mUpdSong" class="nav-link mItem" aria-current="page">Update Song DB</a>
          </li>
          <li class="nav-item">
            <a id="mUpdImg" class="nav-link mItem " aria-current="page">Update Covers</a>
          </li>
          <li class="nav-item">
            <a id="mTest" class="nav-link mItem" aria-current="page">Test</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </form>
    </div>
  </div>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I am using bootstrap 5.1.3 and JQUERY 3.6.0

In a small test program the addClass, removeClass and attr functions work fine!

Has anybody any idea what the problem could be?

Thanks for your support!

Edit

I made a big thinking problem. The functions are working, but they are useless!

Due to the folling submit a POST is executing and is overriding the changes!

Due to the fact, that PHP is only running on the server which sends the HTML code to the client, I have to use a POST parameter to set the active class name to the active menu item.

CodePudding user response：

Changes should be made in your JS code line 3

From- $('."navbar-brand').addClass("active"); To- $('.navbar-brand').addClass("active");

It's throwing an error and blocking the rest of the code from executing.

CodePudding user response：

$('."navbar-brand').addClass("active");

delete that " after point from the class