“ Bootstrap之旅”的彈出式窗口不起作用

Question

我一直在嘗試使用“ Bootstrap Tour”將游覽安裝到我的網站上，對於Javascript和編碼來說，我是一個陌生的人，整天都在忙。 想通了，我來這里問那些經驗豐富的人。

hi1有時可以工作，但即使那樣，它也永遠不會移到hi2上。 彈出窗口也總是壞掉的。

我試圖在下面放一些演示。

  // Instance the tour var tour = new Tour({ name: "tour", steps: [ { element: "#hi", title: "Title of my stepbjhbhjbhm", content: "Content of my step buhjnkjnkuhj" }, { element: "#hi2", title: "Title of my step", content: "Content of my step" }], container: "body", smartPlacement: true, keyboard: true, storage: false, debug: false, backdrop: false, backdropContainer: 'body', backdropPadding: 0, redirect: true, orphan: false, duration: false, delay: false, basePath: "", template: "<div class='popover tour'><div class='arrow'></div> <h3 class='popover-title'></h3> <div class='popover-content'></div> <div class='popover-navigation'> <button class='btn btn-default' data-role='prev'>« Prev</button> <span data-role='separator'>|</span> <button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default' data-role='end'>End tour</button></div>" }); // Initialize the tour tour.init(); $( document ).ready(function() { // Start the tour tour.start(); }); </script> <!-- end tour --> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <button class="btn" id="hi">Button 1</button> </div> <div class="col-md-6"> <button class="btn" id="hi2">Button 1</button> </div> </div> </div> 

Answer 1

為了達到預期的目的，將bootstrp版本更改為3，因為控制台的錯誤是由於引導程序V4引起的

CDN文件有效

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap-tour/0.9.1/js/bootstrap-tour.min.js"></script>

代碼示例-https: //codepen.io/nagasai/pen/rdQOjo

對於控制台中的erorr- Uncaught TypeError：$ element.data（...）。tip不是函數 ，請查看此鏈接以獲取更多詳細信息https://github.com/sorich87/bootstrap-tour/issues/619