Bootstrap Tour 根本不起作用答案

【问题标题】：Bootstrap Tour not working at allBootstrap Tour 根本不起作用
【发布时间】：2020-04-01 05:13:04
【问题描述】：

<!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 的说明，但也没有用。

【问题讨论】：

标签： twitter-bootstrap bootstrap-tour

【解决方案1】：

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

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

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

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

【讨论】：

哇！谢谢！你是最伟大的！

【解决方案2】：

您应该添加为游览的第二步指定的元素：element: "#see-schedule"。第一步后没有它，“游览”将变得不可见。
使用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 上的示例 - 游览会在加载窗口时自行开始，并在单击“开始游览”按钮时开始。

【讨论】：

一旦你开始使用它，请注意它使用浏览器的 localStorage 来跟踪它是否已经运行。如果您只能让游览运行一次，请尝试清空 localStorage。

【解决方案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();

【讨论】：

您应该通过 localStorage.removeItem(key) 选择性地清理 localStorage - tour_current_step 和 tour_end 键；清除整个 localStorage 并不是真的打算在这里。您可以在开发人员工具（chrome）中查看 localStorage，转到“资源”选项卡>>“本地存储”选项。
没有区别
我同意，我们不应该清除整个 localStorage，这有助于下次访问网站时页面加载时间，我们需要清除用于 Bootstrap 的特定 localStorage
这对我有用，使用 bootstrap v4.2.1 和 bootstrap-tour v0.12.0

【解决方案4】：

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

【讨论】：

你得付钱:(

【解决方案5】：

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

【讨论】：

我在使用 Bootstrap 4.x 时遇到了这个问题。使用独立版本的说明对我有用：Otherwise, just include bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js

【解决方案6】：

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

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

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

;

【讨论】：

【解决方案7】：

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

Site Tour_current_step = "0"
Site Tour_end = "是"

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

【讨论】：