如何按下按钮启动Bootstrap Tour？

Question

我想知道为什么我的Bootstrap Tour没有点击启动。

请参阅下面的图片以获取参考和代码。注意，我遗漏了页面的大部分代码，因为我不想压倒你。希望这里有足够的空间来帮助你完成这次旅行。

我做错了什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<!-- Button for Tour Start -->
<a id="MSL-initialize-tour" class="MSL-tour-button MSL-white-button" href="#">START TOUR</a>


<img id="MSL-tour-welcome" class="MSL-Headine-Desktop" src="https://sephora.csod.com/clientimg/sephora/welcome/1-22-18_Headline_V2.png" />


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>


<script>

// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-tour-welcome",
    placement: "top",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features"
  }
]});


$('#MSL-initialize-tour').click(function(){
  tour.init();
  tour.start();
});

</script>

Answer 1

• 我看到的第一个问题是你的诚信与你的完整性不符 第2行bootstrap-tour.min.css的文件。

  integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
  

  该值适用于bootstrap-theme.min.css。运行时，您可以看到控制台中的完整性检查出错。删除完整性检查或找到正确的完整性值。

• 第二个问题是你正在使用瘦身版的jQu​​ery。 你得到TypeError stop is not a function时可以看到这个错误 在控制台日志中。您应该使用jquery-x.x.x.min.js代替。

• 第三个问题是您正在尝试初始化游览 每次按下按钮，只需要初始化它 一旦。因此，您应该只调用tour.start（）一次，并且 然后在那之后调用tour.restart（）。

下面的代码会在页面启动时立即启动游览，但这样您就可以了解之后的点击工作。

  tour.init();
  tour.start();
  $('#MSL-initialize-tour').click(function(){
     tour.restart();
  });

tl; dr tour css的完整性值不正确，不应该使用瘦身版本的jquery，并且需要重启游览而不是每次点击后重新初始化。