CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
user2720197
user2720197

Reputation: 115

Change CSS onclick function javascript

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>

Upvotes: 0

Views: 499

Answers (4)

markvicencio
markvicencio

Reputation: 146

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();
});

Upvotes: 0

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

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() {

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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
    });
});

Upvotes: 0

lc.
lc.

Reputation: 116478

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

Upvotes: 2

Related Questions