2

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

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

4

1 回答 1

3

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

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

或速记

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

您也可以将它移到页面底部，就在</body>.

于 2014-03-11T17:51:30.510 回答