如何使用 Bootstrap Tour popovers 浏览选项卡？

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"); 只需添加（或删除）一个 class 即可使选项卡处于活动状态（或非活动状态）。

现在我必须说它很有魅力。这是我的代码的样子：

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();
}

如何使用 Bootstrap Tour popovers 浏览选项卡？

How to navigate through tabs with Bootstrap Tour popovers?

jquery

twitter-bootstrap

bootstrap-tour