append /remove class for li in jquery

Question

1.36/5 (4 votes)

See more:

I have

HTML

<li class="checkhere active" id="aaaa"> <a> aaaaa </a>   </li>
<li class="checkhere" id="bbbb"> <a> bbbbb </a>   </li>
<li class="checkhere" id="cccc"> <a> ccccc </a>   </li>
<li class="checkhere" id="dddd"> <a> ddddd </a>   </li>

in jquery i want

if bbbbb clicked , then remove active class from all , then show class = active for only bbbbb

same if ccccc , clicked, the remove active class from all ,then show class=active only ccccc

show code for html and jquery

Posted 17-Jan-14 1:04am

maulikshah1990

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hammad · Answer 1 · 2014-01-17T01:13:00

Solution 1

JavaScript

$(document).ready(function(){
    $('li').on('click', function(){
        //alert('clicked');
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
});

HTML

<ul>
    <li class="checkhere active" id="aaaa"> <a> aaaaa </a>   </li>
    <li class="checkhere" id="bbbb"> <a> bbbbb </a>   </li>
    <li class="checkhere" id="cccc"> <a> ccccc </a>   </li>
    <li class="checkhere" id="dddd"> <a> ddddd </a>   </li>
</ul>

CSS

li{
    cursor : pointer;
}
.active{
    color : red;
}

Here is working solution

Posted 17-Jan-14 1:13am

Hammad

Updated 17-Jan-14 1:20am

v3

Comments

maulikshah1990 17-Jan-14 7:14am

can i use $('.checkhere').click and not only li

Hammad 17-Jan-14 7:17am

Yup You can use the class also. you can check on fiddle It was updated and now work with class

maulikshah1990 17-Jan-14 7:21am

but when i use , that ,

for exp.

test1
test2

and i use jquery

$(document).ready(function(){
$('.menulist').on('click', function(){
//alert('clicked');
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});

when i click test2.aspx, page loads and i goto test2.aspx (it should make test.aspx li active) , but test1.aspx is active
i use master page and content page

Hammad 17-Jan-14 7:25am

Place your code in test2.aspx page and instead of using 'this' use '#Id'
e.g.

$(function(){
$('#test2').siblings().removeClass('active');
$('#test2').addClass('active');
});

Member 14531428 24-Jul-19 19:26pm

454

maulikshah1990 17-Jan-14 7:42am

i got the code

$('.menulist').each(function() {
if (window.location.href.indexOf($(this).find('a:first').attr('href')) > -1) {
$(this).addClass('active').siblings().removeClass('active');
}
});

Hammad 17-Jan-14 7:58am

Good work but it would be better if you got the concept...
Have A Nice Day

er.rakesh · Answer 2 · 2014-01-17T01:47:00

Solution 2

use this::

PHP

$(function(){
    $(".checkhere").bind("click",function(){

   $.each( $(".checkhere"), function( i, l ){
  $(this).removeClass("active");
});

          $(this).addClass("active");
    });


});

Posted 17-Jan-14 1:47am

er.rakesh

maulikshah1990 · Answer 3 · 2014-01-31T02:18:00

Solution 3

C#

$('.menulist').each(function() {
        if (window.location.href.indexOf($(this).find('a:first').attr('href')) > -1) {
            $(this).addClass('active').siblings().removeClass('active');
        }
    });

Posted 31-Jan-14 2:18am

maulikshah1990