“靴带游”不起作用的弹出式

Question

我一直试图安装一个旅游到我的网站使用“引导旅游”，我是非常新的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

若要达到预期的目的，请将引导版本更改为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