Question

我使用Bootstrap 3设置标准选项卡。每个选项卡都是用户输入信息的表单。现在每个表单底部都有一个保存按钮，用于保存当前标签中的信息，但我要做的是让用户点击页面顶部的其他标签，然后给出一个警告

 var areYouSure = confirm('If you sure you wish to leave this tab?  Any data entered will NOT be saved.  To save information, use the Save buttons.');

使用“确定”或“取消”按钮。如果他们单击“确定”，则会转到他们单击的选项卡，如果他们点击取消，则会保留在当前选项卡上。谁知道我怎么能这样做？我一整天都试图这样做，但没有运气。我是否应该使用Bootstrap选项卡，还是更容易构建我自己的选项卡功能而不是覆盖bootstrap的选项卡？

Answer 1

根据Bootstrap 3 docs，你可以设置这样的东西。在标签按钮监听器中，显示一个确认框，然后添加逻辑来处理该响应：

$('#myTabs a').click(function (e) {
  e.preventDefault()
  var areYouSure = confirm('If you sure you wish to leave this tab?  Any data entered will NOT be saved.  To save information, use the Save buttons.');
  if (areYouSure === true) {
     $(this).tab('show')
  } else {
     // do other stuff
     return false;
  }
})

Answer 2

您可以在选项卡中添加一个类，然后使用点击功能，您可以触发模式或启动箱确认询问用户是否要继续使用新选项卡。如果他们选择否，则阻止加载新标签，如果他们选择是，则继续。

https://api.jquery.com/click/

http://bootboxjs.com/examples.html

在使用Bootstrap 3选项卡更改选项卡之前，如何确认？

2 个答案: