javascript - Bootstrap-Tour Standalone不工作

javascript - Bootstrap-Tour Standalone不工作,第1张

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

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

最佳答案:

1 个答案:

答案 0 :(得分:3)

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

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

或简写

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复