引导程序不工作答案

【问题标题】：Bootstrap Tour Not Working引导程序不工作
【发布时间】：2020-02-28 19:53:01
【问题描述】：

我正在为我设置的一个非常简单的测试页面测试 Bootstrap Tour。内容显示，但由于某种原因无法启动游览功能。谁能告诉我我做错了什么？

谢谢:)

请在下面找到我的代码

<html>

<head>
    <meta charset="utf-8">
    <title> This is a testing page for bootstrap tour </title>

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstraptour/build/css/bootstrap-tour.min.css" rel="stylesheet">
    <link href="../bootstraptour/build/css/bootstrap-tour-standalone.min.css" rel="stylesheet">

</head>


<!-- Bootstrap core JavaScript
  ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstraptour/build/js/bootstrap-tour.min.js"></script>
<script src="../bootstraptour/build/js/bootstrap-tour-standalone.min.js"></script>

<script>
    var tour = new Tour();

    // Add your steps. Not too many, you don't really want to get your users sleepy
    tour.addSteps([{
        element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
        title: "Title of my step", // string - title of the popover
        content: "Content of my step" // string - content of the popover
    }, {
        element: "#content1",
        title: "Title of my step",
        content: "Content of my step"
    }]);

    // Initialize the tour
    tour.init();

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


<body>
    <div id="content">
        Hello, World!
    </div>
    <br>
    <br>
    <br>
    <div id="content1">
        Another Hello, World!
    </div>
</body>

</html>

【问题讨论】：

什么版本的 Bootstrap？此外，您缺少文档类型和视口元标记。
不要同时包含“bootstrap-tour.min.js”和“bootstrap-tour-standalone.min.js”。当您使用引导程序时，不应包含“bootstrap-tour-standalone.min.js”

标签： javascript html css twitter-bootstrap bootstrap-tour

【解决方案1】：

您应该包含任意一个 bootstrap-tour.min.css/bootstrap-tour.min.js（当您包含bootstrap.min.css/bootstrap.min.js 自己时）或bootstrap-tour-standalone.min.css/bootstrap-tour-standalone.min.js，但不能同时包含两者。见bootstrap tour homepage上的解释。

这是一个有效的 sn-p：

var tour = new Tour();

// Add your steps. Not too many, you don't really want to get your users sleepy
tour.addSteps([{
  element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
  title: "Title of my step", // string - title of the popover
  content: "Content of my step" // string - content of the popover
}, {
  element: "#content1",
  title: "Title of my step",
  content: "Content of my step"
}]);

// Initialize the tour
tour.init();

// Start the tour
tour.start();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour-standalone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet"/>

<div id="content">
  Hello, World!
</div>
<br>
<br>
<br>
<div id="content1">
  Another Hello, World!
</div>

【讨论】：

【解决方案2】：

您需要清除本地存储，因为引导程序使用的是 localStorage。

【讨论】：