Chnage CSS onclick function javascript

У меня есть код, в котором, когда я нажимаю на определенный элемент, его фон должен меняться, удаляя все остальные элементы фона. Но проблема здесь я получаю, когда я нажимаю на li под именем ul li ul родитель Ли также и предоставление background.And Пожалуйста, проверьте мой код нижеChnage CSS onclick function javascript

<!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>

источник

2013-09-06 user2720197

Пожалуйста, добавьте скрипку –

Вы должны обеспечить [скрипку] (http://jsfiddle.net/TrCqU/1/) для этого вида что делает нашу жизнь проще. Сделал это для вас. – naththedeveloper

'$ (" * "). RemoveClass (" active ");' должен быть заменен на '$ (". Active "). RemoveClass (" active ");' как это более эффективно. – jfriend00

Проблема в том, ваше мероприятие распространяется на родителя, так что код выполняется первый в обработчик щелчка для ребенка ul li, а затем снова в обработчик щелчка для родителя ul li.

Добавьте вызов event.stopPropagation() в обработчике ребенка:

$(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

В качестве альтернативы, если вам нужны события для распространения в других местах, но не быть обработаны в этом коде можно сравнить event.target до 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

источник

2013-09-06 07:22:24

Когда я нажимаю на первую ul li, беру все свои дочерние li и предоставляя фон ... но отлично работая с дочерним li's..So, когда я нажимаю на родительский, должен быть выделен только родительский элемент. – user2720197

То же самое происходит с новым кодом, указанным – user2720197

Вы хотите, чтобы только линия нажала, чтобы применить стиль? Тогда вам придется вручную сбросить стиль детей. Попробуйте добавить '.active * {color: black; background: white;} 'к вашему CSS: http://jsfiddle.net/TrCqU/6/ –

Попробуйте в простой форме,

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

Если вы хотите, чтобы удалить все active classes из всех li's затем попробовать это,

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

источник

2013-09-06 07:19:11

Нет его не работает – user2720197

@ user2720197 проверить приведенный ответ. Я вносил в него изменения. –

все еще не работает – user2720197

Попробуйте это в сценарий:

Jquery 10 версия

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

упс извините, если вы используете более низкую версию JQuery

Jquery 1,3 будет штраф

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

EDIT

Вы хотите что-то вроде этого:

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

источник

2013-09-06 07:34:54 markvicencio

Вы можете выбрать, на основе какой версии jquery вы используете – markvicencio

К какой версии jQuery вы дали код – user2720197

Я использую jquery-1.3.2.js, но его не работает – user2720197

Он работает, как обаяние

необходимо изменение в строке 21 в вашем код.

Использование:

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

вместо

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

источник

2013-09-06 07:49:14 Salim

Chnage CSS onclick function javascript

ответ

Смежные вопросы