0

我在我的网站中使用 bootstrap 并解释我想使用bootstrap tour的网站。我已经在我的测试页面中实现了这个并且工作正常。但是当加载页面时游览开始，我想在单击按钮时开始游览。我已经按照这篇文章来实现我的引导之旅。

这是引导程序演示的 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>

如何通过单击按钮开始我的旅行？

谢谢

4

3 回答 3

0

只需tour.start();在单击按钮时调用，而不是在页面加载时调用。假设您的 startbutton 具有 id start-tour。这个片段可以放在(function() { ... })

$("#start-tour").click(function() {
    tour.start();
});
于 2017-01-02T23:48:24.400 回答
0

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

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

于 2019-05-21T11:46:15.437 回答
0

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

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(); 
   });
于 2019-08-06T13:02:51.940 回答