如何修改jQuery代码实现分步菜单点击时将原有active类替换为check类

实现代码 #

你只需要修改activeSideBar函数内的点击事件逻辑即可，修改后的完整jQuery代码如下：

$(document).ready(function () {
    //load the functions
    activeSideBar();
});
function activeSideBar() {
    // set active classes on side bar nav li a
    $("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
      e.preventDefault();
      var $currentParent = $(this).parent();
      // 如果点击的已经是当前激活项，不做处理
      if ($currentParent.hasClass('active')) {
        return;
      }
      // 找到之前的激活项，替换active为check
      $('nav#sidebar.get-qoute-sidebar ul li.active').removeClass('active').addClass('check');
      // 给当前点击项设置为激活状态
      $currentParent.addClass('active');
    });
}

效果参考 #

逻辑说明 #

• 点击菜单项时先判断当前点击的是不是已经处于激活状态，避免重复执行无意义的操作
• 找到当前带有active类的菜单项，先移除active类，再新增check类，完成已完成步骤的状态切换
• 给当前点击的菜单项新增active类，作为当前正在操作的步骤

内容的提问来源于stack exchange，提问作者laurence keith albano