Question

我在我的网站中使用bootstrap并解释我想使用bootstrap tour的网站。我在我的测试页面中实现了这一点，并且工作正常。但是在加载页面时开始游览，我想在点击按钮时开始游览。我已按照此article来实施我的自助游。

这是bootstrap tour demo的javascript：

(function(){

    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

这是html部分：

<div class="content-section-a tour-step tour-step-one"> One <br>

<div class="content-section-a tour-step tour-step-two"> Two <br>

<div class="content-section-a tour-step tour-step-three"> Three <br>

如何通过点击按钮开始我的旅程？

由于

Answer 1

单击按钮时，只需调用tour.start();，而不是页面加载。假设您的开始按钮的标识为start-tour。此代码段可以放在(function() { ... })

中

$("#start-tour").click(function() {
    tour.start();
});

Answer 2

只需将其更改为重新启动即可使用。

$("#start-tour").click(function() { tour.restart(); });

Answer 3

首先，我们将操作写入函数。在此，重要的是在函数外部编写游览的定义。

var tour = new Tour();    

  function StartTour(){
      tour = new Tour({
        storage : false
      });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start(true);
}

然后我们在按钮单击功能中调用StartTour函数。

  $(".tour-step").click(function() {
    StartTour(); 
   });

Bootstrap游览开始按钮

3 个答案: