I used jquery's toggleClass to add and remove but it's(
)list of links

Question

<ul class="nav">
    <li>
        <a href="/dashboard">
            <i class="material-icons">dashboard</i>
            <p>Dashboard</p>
        </a>
    </li>
    <li>
        <a href="profile">
            <p>User Profile</p>
        </a>
    </li>
</ul>

Now what i want is if i click on one of this it will become active so what i did is-

   $(document).ready(function() {
  $('li').bind('click', function() {
    $( this ).addClass('active');
  });
});

but the problem is it has no applied class after loading the page so i want it applid after loading the page i also tried toggleClass

$('li').on('click', function() {
  $(this).parent().toggleClass('active'); 
});

any Suggestoins.. thank you..

So, you basically want to highlight the link of current page you are in. Am I correct? — Mohanraj, Sep 08 '17 at 06:36
yes and my page is base page to another 5 pages so i want to highlight the current page — Kalariya_M, Sep 08 '17 at 06:50
yes I'm applying your answer only but anyhow it's not working, don't know why it should work btw great answer from you @alive ti die — Kalariya_M, Sep 08 '17 at 06:56
yes it worked and I also found out that this Q is asked before me thanks for you great answer, — Kalariya_M, Sep 08 '17 at 07:02

Alive to die - Anant · Accepted Answer · 2017-09-08T07:09:34.150

1

1.Highlighting <a> based on current page:-

$(document).ready(function(){
   var url = location.pathname;// Returns path
   $('.nav li a').each(function(){
     if(url.indexOf($(this).attr('href'))!== -1){
       $(this).addClass('active'); 
     }
   }
});

2.OR Highlighting <li> based on current page:-

$(document).ready(function(){
   var url = location.pathname;// Returns path
   $('.nav li a').each(function(){
     if(url.indexOf($(this).attr('href'))!== -1){
      $(this).closest('li').addClass('active');
     }
   }
});

edited Sep 08 '17 at 07:09

answered Sep 08 '17 at 06:46

Alive to die - Anant

70,531
10
51
98

1

That's the certain solution OP is looking for, just his interpretation is different. and your quote of the day is true :-) – bhansa Sep 08 '17 at 06:48
@bhansa glad to hear . Appreciate for up-vote. – Alive to die - Anant Sep 08 '17 at 06:50

bhansa · Answer 2 · 2017-09-08T06:44:44.830

0

I can realize that you are looking for something like this: Adding active based on URL

First of all you need to define an .active css class, something like this:

.active{
    color:red;
}

then call your js when the page is ready:

 $(document).ready(function() {
  $('li').on('click', function() {
    $( this ).toggleClass('active');
  });
});

Instead of putting changes to li parent put it on li, because you want to toggle class for that itself.

Example: https://jsfiddle.net/qcsw2kcd/1/

edited Sep 08 '17 at 06:44

answered Sep 08 '17 at 06:36

bhansa

7,282
3
30
55

[Is jquery .bind() deprecated?](https://stackoverflow.com/questions/33654716/is-jquery-bind-deprecated) – Alive to die - Anant Sep 08 '17 at 06:37
this works for single click but when i click it it will redirect to another page so i wnt class applied at that page also. and obvio i have defined it – Kalariya_M Sep 08 '17 at 06:39
I have given `#` as href in link for now, OP will have to handle it through js. – bhansa Sep 08 '17 at 06:41
how about adding the class directly in that page? – Shadow Fiend Sep 08 '17 at 06:43
my
contains so effects fades away i want it applied on redirected page also

Kalariya_M

Sep 08 '17 at 06:46

I used jquery's toggleClass to add and remove but it's( )list of links

2 Answers2

I used jquery's toggleClass to add and remove but it's(
)list of links