如何使用 Bootstrap Tour 弹出框浏览选项卡？

Question

我有多个弹出框我想通过锚链接显示到不同的选项卡中，我正在寻找解决方案。

我已经阅读了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",
  }
  ]
  }); 

Answer 2

onNext:function(tour){
     $("a[href='#tab_3']").click();
}
onPrev:function(tour){
     $("a[href='#tab_1']").click();
}