0

我想知道为什么我的 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>
4

1 回答 1

3

  • The first problem I see is that your integrity does not match your file for the bootstrap-tour.min.css on line 2.

    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"

    That value is for bootstrap-theme.min.css. You can see that it has an error with the integrity check in your console when you run it. Either remove the integrity check or find the correct integrity value.

  • The second problem is that you are using the slim version of jQuery. You can see this error as you get TypeError stop is not a function in the console log. You should use jquery-x.x.x.min.js instead.

  • The third problem is that you are attempting to initialize the tour every time you press the button, when you only need to initialize it once. Therefore you should only call tour.start() one time, and then call tour.restart() after that.

The code below starts the tour immediately on page startup, but just so you get the idea the clicks afterwards work.

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

tl;dr The integrity value of the tour css is incorrect, shouldn't use the slim version of jquery, and need to restart the tour instead of re-initializing after every click.

于 2018-01-05T20:55:45.627 回答