如何使用jQuery为菜单链接切换激活样式属性？

推荐方案：用CSS类控制样式（更易维护） #

先在CSS里定义激活状态的样式类：

.main-menu-link-line.active {
  width: 6.11em;
  margin-right: 2.36em;
}

然后修改你的JS代码，点击时先移除所有链接的激活样式，再给当前点击的添加：

$('.main-menu-link-container').click(function() {
  // 移除所有水平线的激活类
  $('.main-menu-link-line').removeClass('active');
  // 给当前点击项的水平线添加激活类
  $(this).find('.main-menu-link-line').addClass('active');
});

这种方式把样式逻辑放在CSS里，后续调整样式直接修改CSS即可，不需要改动JS代码，更符合前端开发规范。

备选方案：直接操作CSS属性 #

如果不想新增CSS类，也可以直接重置其他链接的样式后再设置当前项：

$('.main-menu-link-container').click(function() {
  // 重置所有水平线的样式为默认状态
  $('.main-menu-link-line').css({"width": "", "marginRight": ""});
  // 设置当前点击项的水平线样式
  $(this).find('.main-menu-link-line').css({"width": "6.11em", "marginRight": "2.36em"});
});

这里把未激活链接的样式设为空，会自动恢复到你原本定义的默认样式。

内容的提问来源于stack exchange，提问作者Dmitry Zozulya