引导-巡回独立不工作

Bootstrap-Tour Standalone Not Working

本文关键字：工作 独立 引导      更新时间：2023-09-26

我正试图实现一个Bootstrap-tour的测试，以便熟悉它，我甚至不能在他们的网站上得到基本的例子。

我把这个例子从网站上拿下来，包括所有适当的文件，但我什么也没得到。控制台没有错误，什么都没有。

下面是代码的实时演示。http://connormckelvey.com/test/test.html

下面是我的代码: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <link href="tour/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
    <script src="tour/js/bootstrap-tour-standalone.min.js"></script>
    <script>
    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#test",
        title: "Title of my step",
        content: "Content of my step"
      },
      {
        element: "#test1",
        title: "Title of my step",
        content: "Content of my step"
      }
    ]
    });
    // Initialize the tour
    tour.init();
    // Start the tour
    tour.start();
    </script>
    <style>
        div {
            margin: 20px auto;
            width: 500px;
            padding: 50px;
            background: #EBEBEB;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
    <div id="test1">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</body>

我很困惑，因为这样的事情是如此简单的故障排除使用控制台，但没有任何反馈，我不知道从哪里开始。

在控制台中运行脚本会导致它运行(尽管您有布局问题)。您可能需要将您的旅行脚本封装在文档中。就绪，等待DOM可用:

$(document).ready(function() { ... })

或简写

$(function() { ... });

你也可以把它移到页面底部，就在</body>的前面。

相关文章：