Как выбрать похожие элементы в нескольких списках, если выбран какой-либо из них?

Question

Я использую HTML4.01 Strict, CSS3 и последнюю версию JQuery.

У меня три одинаковых списка на одной странице - один действует как строка меню, два других меньше и отображаются по обе стороны от содержимого главной страницы.

Мне бы хотелось, чтобы при выборе какой-либо одной опции в одном списке она также выбирала ту же опцию в двух других списках.

«Выбор» в данном случае означает применение класса «active_tab» [через .addClass("active_tab")]

Список:

<ul id="lt-menu" class="shift_menu">
    <li class="li_tab">Home</li>
    <li class="li_tab">News</li>
    <li class="li_tab">Info</li>
    <li class="li_tab">Download</li>
    <li class="li_tab">Contact</li>
    <li class="li_tab">Shop</li>
</ul>

Я пытался использовать что-то в этом духе -

$(".tab, .li_tab").click(function() {
    $(".active_tab").removeClass("active_tab");
    $("li".contains(this)).addClass("active_tab");
});

Но пока безуспешно.

Я довольно новичок в JQuery, поэтому любая помощь будет высоко ценится.

Answer 1

Ил попробовал это с 3 копиями вашего списка (я просто меняю ID), и это работает:

$(".tab, .li_tab").click(function() {
    //Disable current selection
    $(".active_tab").removeClass("active_tab");

    // We get the index of the <li> in the current list
    // Each <li> has to be to the same index in the other lists
    var index = $(this).index();

    // We add the 'active_tab' class to all <li> with the same index
    // Assume that all lists have the 'shift_menu' class, of modify the selector
    $('.shift_menu').find('li:eq(' + index + ')').addClass("active_tab");
});

Надеюсь, это работает для вас ...