Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trello Inspired</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  </head>
  <body>
    <div class="left-container">
      <span class="logo"><h2>Title 2</h2></span>
      <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let's get you all set up.</p>
      <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
    </div>
    <div class="right-container">
      <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
      <button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
    </div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../js/libs/bootstrap.min.js"></script>
  <script src="../js/plugins/bootstrap-tour.min.js"></script>
  <script type="text/javascript">

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",
        title: "Exam Enrolment",
        content: "First let's enrol to an exam"
      },
      {
        element: "#see-schedule",
        title: "Your Schedule",
        content: "Great, let's see your new schedule."
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  </script>
</html>

我添加了所有必要的依赖项。我正在使用Bootstrap 3，所以不需要单独包含popover.js。我查看了plugin home page的说明，但也没有帮助。

Answer 1

Bootstraptour将巡演的进度存储在您的localStorage中。这也意味着当你试图设置它时，即。使用了错误的元素ID，bootstraptour仍然可以存储它应该下次显示第2步..即使它不存在，此时它什么也不做。

您需要在浏览器中清除localStorage，或者（可能更容易），更改您的游览名称，如下所示：

var tour = new Tour({
    name: '<some random name>'
});

上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身之后找到了修复程序并发现它正试图获得currenttep＆＃34; 1＆＃34;而不是＆＃34; 0＆＃34;，这是错误的索引。

Answer 2

您应该添加为游览的第二步指定的元素：element: "#see-schedule"。在第一步之后没有它＆＃34;巡演＆＃34;将变得隐形。
使用tour.start(true) - 来自documentation API：

开始游览。传递true以强制开始。

可能你会想要一些按钮来开始巡回赛。它的代码如下：

<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>

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

JsFiddle 上的示例 - 在窗口加载后开始游览，并且开始游览＆＃34;开始游览＆＃34;按钮单击。

Answer 3

我发现在使用Bootstrap Tour进行开发时，如果在初始化之前清除“localStorage”，则会使生活更轻松，因此您不会获得任何延迟的会话数据。对于最初的问题，这将是：

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#enrol-btn1",
    title: "Exam Enrolment",
    content: "First let's enrol to an exam"
  },
  {
    element: "#see-schedule",
    title: "Your Schedule",
    content: "Great, let's see your new schedule."
  }
]});

// Clear bootstrap tour session data
localStorage.removeItem('tour_current_step');
localStorage.removeItem('tour_end');

// Initialize the tour
tour.init();

// Start the tour
tour.start();

Answer 4

我发现intro.js要好得多（小包装）Linqer

Answer 5

我发现为巡回赛命名，然后清除本地存储帮助我进行Bootstrap Tour

var tour = new Tour({
    name: 'mytourname'
]});

localStorage.clear();
// or
localStorage.removeItem("mytourname_end");

;

Answer 6

我的巡演不会偶尔开始，我发现每次你必须在本地存储中有以下两个键时，bootstrap-tour才能正常工作（从浏览器的开发者工具中查看本地存储） -

Site Tour_current_step =“0”
Site Tour_end =“yes”

只要您调用该功能以启动导览，请设置这些密钥（如果它们不在您的本地存储中）。我通过javascript手动设置这些键，它现在完美地工作。希望它有所帮助。

Answer 7

您可能正在使用引导程序4.3.1，此扩展程序与此引导程序版本不兼容。您可以尝试使用Bootstrap 3.3.1，但此更改可能会损坏您的实际外观。

Bootstrap Tour根本不工作

7 个答案: