Question

我正在尝试实施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>

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

Answer 1

在控制台中运行脚本会使其运行（尽管您有布局问题）。您可能需要将您的游览脚本包装在document.ready中，以便等待DOM可用：

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

或简写

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

您也可以将其移至页面底部，就在</body>之前。

Bootstrap-Tour Standalone不工作

1 个答案: