выделять пункты меню на основе связанного содержимого

Question

Я использую jQuery для отображения контента на веб-сайте на основе выбора пункта меню.К каждому пункту меню прикреплен номер, который соответствует контейнеру содержимого.

    $(".main-cat").hover(function() {
    $(this).parent().find("div.arrow-right").remove();
    $(this).after('<div class="arrow-down"></div>');
    $(this).addClass('selected');
    $(this).css('cursor', 'pointer');
},
    function() {
    $(this).removeClass('selected');
    $(this).parent().find("div.arrow-down").remove();
});

$("#sidebar div").click(function() {
    $("#real_0").hide();
    $(".content_sub").hide();
    var menuClass = $(this).attr('class');
    menuClassP = menuClass.split(" ");
    $("#real_" + menuClassP[1]).fadeIn('slow');
});

Я пытаюсь добавить функцию, которая будет выделять только тот элемент меню, который соответствует в настоящее время * active * content.

Какой лучший способ написать это?И можно ли сделать мой текущий код чище?

Answer 1

Добавить

$(this).addClass('selected').siblings().removeClass('selected');

в вашем обработчике кликов и определите класс selected в вашем CSS, который определяет стиль выделения.

Это добавит класс selected к элементу, выбранному в данный момент (, при условии, что это active content ), и удалит его из его братьев и сестер ( из других элементов div). в боковой панели )

Answer 2

Вы можете использовать атрибут данных jquery, установив что-то вроде «data-menuid» для каждого пункта меню в качестве атрибута. Таким образом, вам не нужно разделять имя класса и использовать его.

<li data-menuid="1">menu</li>

$("#sidebar div").click(function() {
    $("#real_0").hide();
    $(".content_sub").hide();
    $("#real_" + $(this).data("menuid")).fadeIn('slow');
});