如何启动自举旅游按钮点击？

Question

我想找出为什么我的靴带巡回赛不启动点击。

请参阅下面的图片以获得参考和代码。注意，我忽略了页面的大部分代码，因为我不想压倒您。希望这里有足够的时间让你的巡回演出顺利进行。

我做错什么了？

​

​

<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。您可以看到，在运行控制台时，控制台中的完整性检查出现了错误。要么删除完整性检查，要么找到正确的完整性值。
• 第二个问题是您正在使用苗条版本的jQuery。当您在控制台日志中获得TypeError stop is not a function时，可以看到此错误。您应该使用jQueryx.min.js。
• 第三个问题是，每次按下该按钮时，当您只需要初始化它一次时，您都会尝试初始化它。因此，您应该只调用tour.start()一次，然后再调用tour.restart()。

下面的代码会在页面启动时立即启动浏览，但是这样您就可以知道点击后的效果。

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

tl；博士浏览css的完整性值是不正确的，不应该使用瘦版本的jquery，并且需要重新启动这个浏览，而不是每次单击之后重新初始化。