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

Question

我有多个弹出我想显示到不同的标签与锚链接，我正在寻找一个解决方案来做到这一点。

我已阅读issue #78，其中有人明显使用onShow参数代替redirect，但我没有用这些函数来舒服，我无法使其工作。

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

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

我注意到，如果我加载之前的选项卡，然后再次加载选项卡＃tab3，突然出现popover元素“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", 
    } 
    ] 
    });