Change CSS onclick function javascript

Question

I have a code in which when I click on particular element its background should change by removing all other elements background.But the problem here I am getting is when I click on li under ul li ul its taking parent li also and giving background. And Please check my code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li ul li").click(function() {  

 //a = $(this).html();         // when clicking any of these links
 //alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function() {  

//a = $(this).html();         // when clicking any of these links
//alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>

<style>
.active { color:white; background:green; }
</style>
</head>
<body>
<ul>
<li>level1
        <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        </ul>
</li>
<li>level2</li>
<li>level3</li>
</ul>

</body>
</html>

You should provide a fiddle for this kind of thing, makes our lives easier. Did this one for you. — ɴᴀᴛᴇ ᴅᴇᴠ
– ɴᴀᴛᴇ ᴅᴇᴠ, Commented Sep 6, 2013 at 7:18
$("*").removeClass("active"); should be replaced with $(".active").removeClass("active"); as it's way more efficient. — jfriend00
– jfriend00, Commented Sep 6, 2013 at 7:19
@user2720197 - I wasn't suggesting my change would fix your problem. I can't understand your question so I have no idea what you problem is. But, what I've suggested is a much better way to remove all existing active classes if that's part of your eventual solution. — jfriend00
– jfriend00, Commented Sep 6, 2013 at 7:46

lc. · Accepted Answer · 2013-09-06 07:28:08Z

2

The problem is your event is propagating to the parent, so the code is being executed first in the click handler for the child ul li and then again in the click handler for the parent ul li.

Add a call to event.stopPropagation() in the child's handler:

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
        evt.stopPropagation();
    })
});

Fiddle

Alternatively, if you need events to propagate elsewhere, but not be handled in this code you can compare event.target to this:

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        if(evt.target !== this) return; //do not process on bubbled-up events

        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
    })
});

Fiddle

edited Sep 6, 2013 at 7:28

answered Sep 6, 2013 at 7:22

lc.

117k21 gold badges163 silver badges190 bronze badges

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

2 Comments

user2720197 Over a year ago

When i click on first ul li its taking all its child li and giving background...but working fine with the child li's..So when i click on parent li only parent element should be highlighted

lc. Over a year ago

You mean you want only the line clicked to apply the style? You'll have to manually reset the children's style then. Try adding .active * { color:black; background:white;} to your CSS: jsfiddle.net/TrCqU/6

Rohan Kumar · Accepted Answer · 2013-09-06 07:36:49Z

0

Try it in a simple manner,

$(document).ready(function(){
    $("li").on('click',function() {  
        $(this).parent('ul').find('li').removeClass("active");// get all li from the parent ul
        $(this).addClass("active");// add highlight to clicked link
    });
});

If you want to remove all active classes from all li's then try this,

$(document).ready(function(){
    $("li").on('click',function() {  
        $('li').removeClass("active");// remove active class from all li's
        $(this).addClass("active");// add highlight to clicked link
    });
});

edited Sep 6, 2013 at 7:36

answered Sep 6, 2013 at 7:19

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

Rohan Kumar Over a year ago

@user2720197 test the above answer I've made changes in it.

MD SHAHIDUL ISLAM · Accepted Answer · 2013-09-06 07:49:14Z

0

It is working as charm

Need a change at line 21 in your code.

Use:

$("ul li ul li").click(function() {

instead of

$("ul li").click(function() {

answered Sep 6, 2013 at 7:49

MD SHAHIDUL ISLAM

14.5k6 gold badges84 silver badges93 bronze badges

Comments

markvicencio · Accepted Answer · 2013-09-06 08:07:40Z

0

Try this to your script :

jquery 10 version

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

oops sorry if you use lower version of jquery

jquery 1.3 will be fine

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

EDIT

Do you want something like this :

var Test = {
    init:function() {
        $('ul li').click(function() {
            $('li').removeClass('active');
            $(this).addClass('active');
            $(this).children().css({
                'background' : '#fff',
                'color' : '#000'
            });
        });
    }
}

$(document).ready(function(){
    Test.init();
});

edited Sep 6, 2013 at 8:07

answered Sep 6, 2013 at 7:34

markvicencio

1461 silver badge7 bronze badges

2 Comments

markvicencio Over a year ago

You can choose based on what jquery version you use

markvicencio Over a year ago

Do you also want to have the parent an active class?

Collectives™ on Stack Overflow

Change CSS onclick function javascript

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related