如何使用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", 
    } 
    ] 
    });