Question

我正在使用jQuery根据菜单项选择在网站上显示内容。每个菜单项都附有一个与内容div容器匹配的编号。

    $(".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');
});

我正在尝试添加一项功能，该功能仅突出显示与当前 * 有效 *内容相对应的菜单项。

写这个的最好方法是什么？我现在的代码可以变得更干净吗？

Answer 1

添加

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

单击处理程序中的

，并在CSS中定义一个selected类来定义高亮样式..

这会将类selected添加到当前点击的元素（，假设是活动内容），并将其从其兄弟姐妹中移除（侧栏中的其他div ）

Answer 2

您可以通过为每个菜单项设置类似“data-menuid”的内容作为属性来使用jquery数据属性。这样你就不必拆分类名并使用它。

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

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

根据相关内容突出显示菜单项

2 个答案: