Jquery 步骤：禁用选项卡式导航

Question

这是我第一次在这里发帖，即使我已经使用这个网站很长时间了。这是我的问题：我正在使用 jquery-steps 创建验证/结账表单，我想禁用选项卡导航，它允许用户在步骤之间自由跳转（例如从步骤 1 到步骤 3）。选项卡必须保持可见。

我意识到解决方案可能非常简单，但我现在真的很困惑:/ ...

感谢您的帮助，如有英文错误请原谅！

Answer 1

好吧，经过一些扩展研究，我设法找到了解决我的问题的替代解决方案。我注意到所有标头都存储在“.steps”div 内。因此，我添加了一个新的 CSS 属性：

.steps {
  pointer-events: none;
}

这会禁用该特定类的所有鼠标操作。我知道这不是最干净的解决方案，但是嘿，它对我有用:)！

（感谢拉斐尔的帮助）

Answer 2

您已经查看过 jquery-steps.com 的示例了吗？如果没有，请查看高级表单示例此处！ 另请参阅this博客文章，其中详细介绍了如何使用 jQuery Steps 创建表单向导。

Answer 3

今天遇到了同样的问题，并通过将

disabled

类添加到

li

内的

div.steps

元素来解决它。使用

pointer-events

CSS 对我来说不是一个解决方案，因为必须在某些点禁用某些步骤导航。虽然这种方法可能会破坏你的 CSS，即如果你有

disabled

和

done

类，并且

disabled

样式覆盖了

done

样式，但任何调整都无法解决。

Answer 4

假设您有一个 id 为

#form-guardar-ambiente

的表单，尝试激活所有选项卡，然后尝试将第一个选项卡标记为当前选项卡：

let tabs = $('#form-guardar-ambiente').find('li[role="tab"]');
tabs.each(function() {
    $(this).removeClass('disabled').addClass('done');
    $(this).attr('aria-disabled', 'false').attr('aria-selected', 'false');
});
$('#form-guardar-ambiente-h-0').parent('li').addClass('first current');
$('#form-guardar-ambiente-h-0').parent('li').attr('aria-selected', 'true');

现在所有选项卡上的导航均处于活动状态。我希望这可以帮助您解决问题。