Я использую следующий jQuery для изменения классов по элементам в неупорядоченном списке. Не похоже, что это самый эффективный способ достижения эффекта. Есть ли лучший способ написать это?
$(function() {
$('nav li a').click( function() {
$(this).parent().siblings().children().removeClass('active');
$(this).addClass('active');
});
});
Спасибо
S
В этих случаях обычно проще присоединить обработчик к <li> и нажать пузырь вверх из <a> (который по умолчанию). Тогда ваш обработчик выглядит следующим образом:
$(function() {
$('nav li').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
Тогда в вашем CSS вы просто учитываете active на <li>, например:
li.active a { color: red; }
В стороне, если у вас много элементов <li>, вы захотите использовать .delegate() следующим образом:
$('nav').delegate('li', 'click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
Также обратите внимание, что если вы хотите удалить 'active' из всех элементов, кроме this, то вы можете уйти с чем-то простым, как
$('.active').removeClass('active');
$(this).addClass('active');
И это должно распространяться через дерево довольно легко. Тем не менее, я вижу, что это вызывает головную боль при работе, если DOM сильно заселен.
Я использовал выше код, он работает
Я использую в своем коде
enter code here : function addnewStepsUpper(){
jQuery('.hide_upper_clone_class').clone().insertAfter(".upper_clone_class1");
jQuery('.upper_clone_class1').siblings().removeClass('hide_upper_clone_class');
}
Спасибо Вишал Санвар