onclick jquery add/remove class function not working

Question

I'm using single navigation file for all web pages, so i need to add or remove class based on click function. but somehow it's not working fine. any help would be appreciated.

$(function() {
  $("li").on("click", function() {
    $("li.active").removeClass("active");
    $(this).addClass("active");
  });
});

<div class="nav-side-menu">
  <div class="brand">Brand Logo</div>
  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  <div class="menu-list">
    <ul id="menu-content" class="menu-content collapse out">
      <li style="cursor: pointer;" onclick="window.location='new-patient.php';">
        <a><i class="fa fa-plus-square"></i>New Patient</a>
      </li>
      <li style="cursor: pointer;" onclick="window.location='returning-patient.php';">
        <a><i class="fa fa-plus-square"></i>Returning Patient</a>
      </li>
    </ul>
  </div>
</div>

When page is navigate to other page then how you can manage active state from old page. for this you have to change your code — Super User
– Super User, Commented Oct 5, 2017 at 9:22
based on the url you can manage which li need to be active. This is only the solution — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Oct 5, 2017 at 9:24
If you are using php ( from the window location attr in your code ), it's better to handle the class when rendering the page itself instead of handling it later on via javascript — mrid
– mrid, Commented Oct 5, 2017 at 9:30

Weird Dude · Accepted Answer · 2018-01-31 12:27:31Z

2

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

JSFiddle

answered Jan 31, 2018 at 12:27

Weird Dude

689 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Super User · Accepted Answer · 2017-10-05 09:28:14Z

You can use following script on every page to set this.

var pageName = (function () {
  var a = window.location.href,
    b = a.lastIndexOf("/");
  return a.substr(b + 1);
} ());

$("#menu-content a").each(function () {
  if ($(this).attr('href') == pageName) {
    $(this).parents("li").addClass('active');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-side-menu">
	<div class="brand">Brand Logo</div>
	<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
	<div class="menu-list">
		<ul id="menu-content" class="menu-content collapse out">
			<li>
				<a href="new-patient.php">
					<i class="fa fa-plus-square"></i>New Patient
				</a>
			</li>
			<li>
				<a href="returning-patient.php">
					<i class="fa fa-plus-square"></i>Returning Patient
				</a>
			</li>
		</ul>
	</div>
</div>

Collectives™ on Stack Overflow

onclick jquery add/remove class function not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related