JQuery конфликт с одинаковыми сценариями - PullRequest
0 голосов
/ 11 сентября 2010

Я использую jquery для загрузки контента во вкладки и переключения вкладок по щелчку.Моя проблема в том, что на одной странице я использую этот «переключатель вкладок» дважды, и это вызывает конфликт.Я не слишком опытен с jquery, поэтому моя проблема, вероятно, заключается в том, что я создаю функцию дважды в голове.Вот мой jquery (вы заметите, что есть повторяющиеся скрипты, с селекторами, которые немного изменились, поэтому «переключатели вкладок» выглядят по-другому.выше. Второй скрипт работает нормально, а первый - нет.

Вы можете увидеть это в прямом эфире здесь: ссылка Вы заметите, что второй скрипт работает нормально (внизу:Марджи и Тодд. И первый скрипт не работает (на боковой панели: категории и архивы.)

Есть идеи, как это исправить?

1 Ответ

0 голосов
/ 11 сентября 2010

Я знаю этот сценарий - я фактически рефакторил его для другого вопроса.Код довольно плохой, в том смысле, что он содержит много плохих практик.Посмотрим, что здесь можно сделать:

$(".tabs_content").not(':first-child').hide();
var tabs = $('.tabs li');

tabs.filter(':first-child').addClass('active');

tabs.click(function() {
    var current = $(this);

    if(!current.hasClass('active')){
        current.addClass('active').siblings().removeClass('active');
        var activeTab = current.find("a").attr("href");
        current.parent().next().children().hide().filter(activeTab).fadeIn();
    }

    return false;
});

Там - единый скрипт для всех ваших вкладок.Переименуйте все ваши контейнеры вкладок в tabs.При этом используется довольно тяжелая цепочка, которая на самом деле не очень эффективна, но, учитывая DOM, тут особо нечего делать.Используйте это, чтобы вам не понадобилось два скрипта, которые делают по сути одно и то же.

Посмотрите, как это работает здесь: http://jsfiddle.net/E3SFt/2/. Я скопировал ваш символ HTML для символа для этого с незначительной модификацией имен классов, как отмечено выше.Также обратите внимание, что там есть недопустимый HTML-код - элементы li внутри div s недопустимы.

Редактировать: Глупая ошибка, this.hasClass должно быть current.hasClass

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...