Question

我一直在尝试使用“Bootstrap Tour”在我的网站上安装游览，我对Javascript和编码非常陌生并且我整天都在使用它。想我会来这里问一些经验丰富的人。

hi1有时可以工作，但即便如此，它也永远不会进入hi2。 popover总是被打破。

我试着在下面放一个小演示。

 // 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

要实现预期的更改，boottrp版本为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- 未捕获的TypeError：$ element.data（...）。tip不是函数，请查看此链接以获取更多详细信息 https://github.com/sorich87/bootstrap-tour/issues/619

“Bootstrap Tour”的弹出窗口无法正常工作

1 个答案: