Question

我正在尝试更改用户选择的活动菜单/子菜单的颜色。

例如，点击Sub11时，Link 1和Sub11都会转为red。同样，点击Sub22时，Link 2和Sub22将为red。

ul a { cursor: pointer; }
.active { color:red;}

<ul>
 <li class="active"><a>Link 1</a>
     <ul>
         <li><a>Sub11</a></li>
         <li><a>Sub12</a></li>
     </ul>
 </li>
 <li><a>Link 2</a>
     <ul>
         <li><a>Sub21</a></li>
         <li><a>Sub22</a></li>
     </ul>
 </li>
 <li><a>Link 3</a></li>
</ul>

Answer 1

尝试使用jquery这段代码：

$('.link > a').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('.submenu > li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    $(this).parent('ul').prev('a').addClass('active');

});

说明：

第一部分：每当您点击.link项目时，您都会删除所有其他活动项目，并将单击的项目设置为活动项目。

第二部分：每当您单击子菜单项时，您将从上一项中删除活动状态，并将其设置为单击的子菜单项及其前任.link项

您必须将类link和submenu添加到您的HTML中，如下所示：

<ul>
 <li class="link">
     <a class="active">Link 1</a>
     <ul class="submenu">
         <li><a>Sub11</a></li>
         <li><a>Sub12</a></li>
     </ul>
 </li>
 <li class="link">
     <a>Link 2</a>
     <ul class="submenu">
         <li><a>Sub21</a></li>
         <li><a>Sub22</a></li>
     </ul>
 </li>
 <li class="link"><a>Link 3</a></li>
</ul>

这是fiddle

如何更改活动菜单和子菜单项样式

1 个答案: