6 
<!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。我查看了插件主页以获取说明，但它也没有帮助。

4

7 回答 7

18

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

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

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

上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身并发现它试图获取当前步骤“1”而不是“0”之后找到了修复，这是错误的索引。

于 2014-09-02T10:00:03.343 回答
11
  1. 您应该添加您为游览的第二步指定的元素：element: "#see-schedule"。在第一步之后没有它，“游览”将变得不可见。
  2. 使用tour.start(true)- 来自文档 API：

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

可能您会想要一些按钮来启动 Tour。它的代码如下所示：

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

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

JsFiddle上的示例 - 浏览器在加载窗口时自行开始，并在“开始浏览”按钮单击时开始。

于 2014-05-30T11:34:04.430 回答
6

我发现在使用 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();
于 2015-03-02T16:56:58.330 回答
2

我发现 intro.js 更好（而且包更小） http://usablica.github.io/intro.js/

于 2015-05-19T17:40:39.320 回答
1

我发现命名游览然后清除本地存储有助于我使用 Bootstrap Tour

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

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

;

于 2020-03-31T21:13:04.123 回答
1

您可能正在使用 bootstrap 4.3.1，此扩展与此版本的 bootstrap 不兼容。您可以尝试使用 bootstrap 3.3.1，但此更改可能会损坏您的实际前端样式。

于 2019-04-04T14:30:52.053 回答
0

我的旅行偶尔不会开始，我发现每次您的本地存储中必须有以下两个密钥时，引导程序都能正常工作（从浏览器的开发人员工具中查看您的本地存储）-

  1. Site Tour_current_step = "0"
  2. Site Tour_end = "是"

一旦您调用该功能开始游览，如果您的本地存储中不存在这些键，请设置它们。我通过 javascript 手动设置了这些键，现在它可以正常工作了。希望能帮助到你。

于 2018-04-24T07:25:25.807 回答