0

我正在学习如何实现引导程序，它看起来很简单。我创建了一个简单的程序来查看它的运行情况，但是当我尝试运行代码时，收到以下错误：

Uncaught TypeError: t(...).stop is not a function
    at o._scrollIntoView (bootstrap-tour.min.js:22)
    at o.<anonymous> (bootstrap-tour.min.js:22)
    at o._callOnPromiseDone (bootstrap-tour.min.js:22)
    at o.showStep (bootstrap-tour.min.js:22)
    at o.init (bootstrap-tour.min.js:22)
    at test.html:67

谁能告诉我怎么了？我检查了链接，它们被正确引用。下面是我的代码。

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="title" content="Test" />
    <meta name="description" content="Bootstrap Test Demo" />

    <title>Bootstrap Tour Test</title>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

     <!-- Bootstrap Tour CSS -->
    <link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet">


</head>

<body>

    <div class="container" id="test1">
        Hello World!
    </div>

    <br>
    <br>
    <br>

    <div class="container" id="test2">
        Another Paragraph
    </div>

    <!-- Bootstrap jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <!-- Bootstrap Popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <!-- Boostrap Tour Javascript -->
    <script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>

    <script>
        // Instance the tour
        var tour = new Tour({
          steps: [
          {
            element: "#test1",
            title: "Title of my step",
            content: "Content of my step"
          },
          {
            element: "#test2",
            title: "Title of my step",
            content: "Content of my step"
          }
        ]});

        // Initialize the tour
        tour.init();

        // Start the tour
        tour.start();

    </script>

</body>

4

1 回答 1

0

你已经包含jquery了 2 次，一个在头部，另一个在popper图书馆之前。

只需删除该jquery-3.2.1.slim.min.js行，一切都会正常工作。

另外，bootstrap-tour不完全支持bootstrap 4，我建议您使用该3.7.7版本。

于 2017-12-22T13:50:15.883 回答