Добавление и удаление активного класса

Я знаю, что это должно быть простым и уже покрыто миллион раз, но я просто не могу заставить его работать.Добавление и удаление активного класса

Это ваш основной скрипт, который делает последнюю ссылку, которую вы нажали в списке, становится «активной» ссылкой, добавляющей к ней «активный» класс.

HTML

<ul id="projectsList"> 
      <li><a href="#" class="activeProject" id="portoftyne">Port of Tyne</a></li> 
      <li><a href="#" id="eaga">Eaga</a></li> 
      <li><a href="#" id="gong">Gong</a></li> 
      <li><a href="#" id="nufc">NUFC</a></li> 
     </ul>

JQuery

$(document).ready(function() { 
    $('#projectsList a').click(function(){ 
     $('.activeProject').removeClass('activeProject') 
     $(this).addClass("activeProject"); 
    }); 
});

Должно работать, не на всех.

EDIT С этим кодом ничего плохого не работает. В документе над ним был раздел кода, который мешал ему работать.

источник

2011-02-03 Sam

Он отлично работает. См. Здесь: http://jsfiddle.net/cFGyt/ У вас должен быть другой javascript, который может быть неудачным. – Victor

ваш код работает для меня ... – acm

Как вы тестируете результат? Возможно, ошибка в вашем файле CSS, поэтому вы не получаете визуальной обратной связи. – user113716

У меня проблем нет.

взгляд: http://jsfiddle.net/JqMK8/

он работает.

ошибка должна быть где-то еще

источник

2011-02-03 14:55:13 Fender

Да, я пропустил ';' код перед этим. Провел час, глядя на неправильную часть :( – Sam

Попробуйте быть более конкретным селектором:

$(document).ready(function() { 
    $('#projectsList li a').click(function(){ 
     $('.activeProject').removeClass('activeProject') 
     $(this).addClass("activeProject"); 
    }); 
});

Я не уверен, что это неправильно. Этот код работает для других людей ...

источник

2011-02-03 14:53:34 Blender

Это было первое, что я пробовал. Я думал, что быть более общим поможет LOL. – Sam

Ну, код выглядит правильно. Не могли бы вы разместить всю страницу и JS-файл? Возможно, проверьте CSS? Кажется, нет проблем. – Blender

Я стараюсь это, и это не работает, ничего плохого в вашем коде:

DEMO

источник

2011-02-03 14:57:17

Я никогда не видел цвет «лосося», который использовался раньше (и я не знал о его существовании)! – Blender

Я знаю это из книги (http://www.jr.com/ new-riders-publish/pe/NRP_0321574168 /). Вы можете объявить цвет в CSS с именем этого цвета –

Возможно ID #projectsList изменяется ваш выходной процессор? Может произойти в .NET или некоторых средах Java.

Попробуйте вместо этого выбрать класс .projectsList и посмотреть, работает ли он.

Я мог бы также рекомендовать практику делегирования событий вместо:

$('.projectsList').click(function(evt){ 
    if (evt.target.nodeName == 'A') { 
    var elm = $(evt.target); 
    if (elm.hasClass('activeProject')) { return; } 
    $('.activeProject').removeClass('activeProject'); 
    $(evt.target).addClass('activeProject'); 
    } 
});

(упрощенный и быстрый письменный)

UPDATE Сэм, я рекомендую JavaScript Lint, если вы еще не пробовали. Используя его online или в вашем редакторе (есть пакеты и плагины для него), вы сможете легко обнаруживать ошибки и предупреждения в своем JavaScript-коде.

источник

2011-02-03 15:08:19 madr

Я настоятельно рекомендую использовать переменную для ссылки на activeProject. Если у вас большие страницы, это значительно сэкономит на обработке, поскольку поиск DOM может быть дорогостоящим. Это также сделает его менее склонным к таким проблемам, как тот, который у вас есть (выбор неправильного элемента).

$(document).ready(function() { 
     var active = $('#projectsList a.activeProject'); 
     $('#projectsList a').click(function() { 
      if(active) $(active).removeClass('activeProject'); 
      $(this).addClass("activeProject"); 
      active=this; 
     }); 
    });

источник

2011-02-03 15:09:33 mihaimm

Добавление и удаление активного класса

ответ

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