CODEWITHSUNDEEP
phpjquerycodeigniter
user_777
user_777

Reputation: 805

class active not working on page

I know this question comes across a lot, but I just can't figure out how to do this using the, already answered posts. Here I am having different menus on a single page. When I click on each menu I want that menu to be active but here it's not working.

This is my view page:

<ul class="nav navbar-nav navbar-right">
  <li class="active"> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#about">About</a> </li>
  <li class=""><a class="page-scroll" href="<?php echo site_url('nowaste_control/index#product'); ?>">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#technology">Technology</a> </li>
</ul>

This is my jQuery:

<script type="text/javascript">
$('.nav navbar-nav li a').click(function($) {
  $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
});
</script>

Upvotes: 5

Views: 3134

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

Try the following 

$(function(){
    $('.page-scroll').on('click',function(){
       $('.active').removeClass('active');
    $(this).parent().addClass('active');
    });
   });

use this to trigger the active class on page load:

$(function(){
$('.active').removeClass('active');
$('a[href="'+window.location.href'"]').parent().addClass('active');
});

Upvotes: 0

Oli Soproni B.
Oli Soproni B.

Reputation: 2800

Here is a sample way to do it. By the way. since i cannot have a snippet of you html code for the navigation list i just created a simple one

here is the html i created

<div class="nav">
  <li class="active"> <a class="page-scroll" href="#about">About</a> </li>
  <li class=""><a class="page-scroll" href="#product">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="#technology">Technology</a> </li>
</div>

here is the javascript

$(document).ready(function(){
  $(document).on('click', '.nav li a', function () {
    console.log($(this));
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});

DEMO

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You can wrap your script in $(function(){..}); so that it will ensure DOM is ready. Also your jquery selector need to be corrected because as per class="nav navbar-nav navbar-right" your selector must be .nav.navbar-nav and not .nav navbar-nav (this says there is child navbar-nav inside nav. see below code

$(function(){
   //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav"
   $('.nav.navbar-nav li a').click(function($) {
   $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
  });
});

And if you are creating these elements dynamically then use .on() as shown below -

$(function(){
       //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav"
       $(document).on('click','.nav.navbar-nav li a',function($) {
       $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
      });
 });

Upvotes: 0

Related Questions