jquery - 使用 jquery 中的变量突出显示当前菜单

Question

HTML标记是：

<ul class="topMenu" style="padding-top: 35px;">
<li class="acB"><span><a id="configure" title="Configure">CONFIGURE </a></span></li>
<li><span><a id="accounts" title="Accounts">ACCOUNTS</a> </span></li>
<li><span><a id="forwarding" title="Forwarding">FORWARDING</a></span></li>
<li><span><a id="container_track" title="Container Track">CONTAINER TRACK</a></span></li>
<li><span><a id="fleet_management" title="Fleet Management">FLEET MANAGEMENT</a> </span></li>

而css类是：

 .topMenu li.acB
{
color: #fff;
background-color: #F36501;
  border-bottom: 1px solid #4F556B;
}

我可以突出显示选定的菜单吗？

JS代码是(jquery: used)：

     $("#accounts").closest('ul').find('.acB').removeClass('acB');
     $("#accounts").parents().addClass('acB');         
     $("#accounts").parent().children().removeClass('acB');

我们可以创建一个变量来完成上述过程并声明菜单级别吗？

Answer 1

我认为您正在寻找的是：

// Watch for clicks on `a` elements within the menu
$(".topMenu").on("click", "li span a", function() {
    // Get a jQuery wrapper for the clicked 'a'
    var $this = $(this);

    // Remove the acB class on whatever element it's currently on
    // within this menu.
    $this.closest('ul').find('.acB').removeClass('acB');

    // Add it to the 'li' containing this link
    $this.closest('li').addClass('acB');

    // Stop the event
    return false;
});