2

我有多个弹出框我想用锚链接显示到不同的选项卡中，我正在寻找一个解决方案来做到这一点。

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

我正在做的是使用onNext()andonPrev()函数在显示下一个（或上一个）弹出框之前使用 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();

谢谢，

4

2 回答 2

2

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

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

将我的新选项卡$("").tab('show');的属性从 更改为，然后简单地添加（或删除）一个类以使选项卡处于活动状态（或非活动状态）。displaynoneblock$("").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",
  }
  ]
  });
于 2017-01-01T15:36:01.853 回答
1 
onNext:function(tour){
     $("a[href='#tab_3']").click();
}
onPrev:function(tour){
     $("a[href='#tab_1']").click();
}
于 2018-07-27T18:30:53.350 回答