jquery - 如何使用 Bootstrap Tour 弹出窗口浏览选项卡？

Question

我有多个弹出窗口，我想通过 anchor 链接显示到不同的选项卡中，我正在寻找解决方案来实现这一点。

我已阅读 issue #78其中有人显然使用 onShow 参数而不是 redirect 使其工作，但我对这些功能不满意，并且无法使其工作。

我正在做的是使用 onNext() 和 onPrev() 函数在下一个(或上一个)弹出窗口之前用 JQuery 打开选项卡显示。

我的问题是，例如，在显示弹出框元素“tour2”后(通过单击“下一步”)，选项卡#tab3正确显示，但不幸的是没有弹出框元素“tour3”。

我注意到，如果我加载前一个选项卡，然后再次加载选项卡 #tab3，弹出窗口元素“tour3”会突然出现。

知道这可能出什么问题吗？

这是我使用的代码:

var tour = new Tour({
  name: "tour",
  container: "body",
  smartPlacement: true,
  keyboard: true,
  storage: false,
  steps: [
  {
    element: "#tour1", // this popover is on tab2
    title: "Title here",
    content: "some content here"
  },
  {
    element: "#tour2", // this popover is on tab2
    title: "Title here",
    content: "some content here",
    onNext:function(tour){
                    jQuery('.nav a[href="#tab3"]').tab('show');
                }
  },
  {
    element: "#tour3", // this popover is on tab3
    title: "Title here",
    content: "some content here",
    onPrev:function(tour){
                    jQuery('.nav a[href="#tab2"]').tab('show');
                }
  }
  ]
  });

// Initialize the tour
tour.init();

// Start the tour
tour.start();

谢谢，

Answer 1

经过几次研究和尝试，我终于找到了我自己问题的答案。希望它对其他人有帮助。

我使用 onNext() 和 onPrev() 浏览选项卡是正确的，但新选项卡的 div 仍然隐藏，并且需要额外的 JQuery。

$("").tab('show'); 将新选项卡的 display 属性从 none 更改为 block，然后 $("").addClass("active"); 和 $("").removeClass("active");只需添加(或删除)一个类即可使选项卡处于事件状态(或非事件状态)。

现在我必须说它就像一个魅力。我的代码如下所示:

var tour = new Tour({
  name: "tour",
  container: "body",
  smartPlacement: true,
  keyboard: true,
  storage: false,
  steps: [
  {
    element: "#tour1",
    title: "Some title here",
    content: "Some content here",
    placement: "right"
  },
  {
    element: "#tour2",
    title: "Some title here",
    content: "Some content here",
    placement: "right"
  },
  {
    element: "#tour3",
    title: "Some title here",
    content: "Some content here",
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(2) a").tab('show');
                    $("div.tab-pane:nth-child(2)").removeClass("active");
                    $("div.tab-pane:nth-child(4)").addClass("active");
                }
  },
  {
    element: "#tour4",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(4)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(1) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(3) a").tab('show');
                    $("div.tab-pane:nth-child(4)").removeClass("active");
                    $("div.tab-pane:nth-child(6)").addClass("active");
                }
  },
  {
    element: "#tour5",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(2) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(4) a").tab('show');
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.tab-pane:nth-child(8)").addClass("active");
                }
  },
  {
    element: "#tour6",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(8)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(3) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(4) a").tab('show');
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.tab-pane:nth-child(8)").addClass("active");
                }
  },
  {
    element: "#tour7",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
  }
  ]
  });