twitter-bootstrap – Bootstrap Tour根本不工作

发布时间：2020-12-17 20:41:17 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtml lang="en" head titleTrello Inspired/title link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css" link rel="sty

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trello Inspired</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  </head>
  <body>
    <div class="left-container">
      <span class="logo"><h2>Title 2</h2></span>
      <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way,let's get you all set up.</p>
      <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
    </div>
    <div class="right-container">
      <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
      <button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
    </div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../js/libs/bootstrap.min.js"></script>
  <script src="../js/plugins/bootstrap-tour.min.js"></script>
  <script type="text/javascript">

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",title: "Exam Enrolment",content: "First let's enrol to an exam"
      },{
        element: "#see-schedule",title: "Your Schedule",content: "Great,let's see your new schedule."
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  </script>
</html>

我添加了所有必要的依赖项.我正在使用Bootstrap 3,所以不需要单独包含popover.js.我已经查看了plugin home page的说明,但它也没有帮助.

解决方法

Bootstraptour将巡演的进度存储在localStorage中.这也意味着当你试图设置它时,即.使用了错误的元素ID,bootstraptour仍然可以存储它应该下次显示第2步..即使它不存在,此时它什么都不做.

您需要在浏览器中清除localStorage,或者(可能更容易),更改您的游览名称,如下所示：

var tour = new Tour({
    name: '<some random name>'
});

上面的方法对我有用,因为我遇到了同样的问题.我在调试代码本身后找到了修复程序并发现它试图获得currenttep“1”而不是“0”,这是错误的索引.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!