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

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

我正确使用In [290]: df1 Out[290]: col1 f_col1 0 A 0 1 A 0 2 B 1 3 C 2 4 D 3 5 E 4 In [291]: df2.col1.map(df1.drop_duplicates().set_index('col1').f_col1) Out[291]: 0 0 1 1 2 3 3 4 Name: col1, dtype: int32和onNext()来浏览标签，但新标签的div仍然隐藏，需要额外的JQuery。

onPrev()将新标签的$("").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();
}

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

2 个答案: