如何使引导程序工作？答案

【问题标题】：How to make bootstrap-tour work?如何使引导程序工作？
【发布时间】：2019-06-21 07:46:19
【问题描述】：

我在页面中有此代码。我正在尝试使 bootstrap-tour 工作，但它没有发生。我究竟做错了什么？我在这里错过了什么？

<!DOCTYPE html>
<html>
<head>

    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-tour.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
        <script>
    // Instance the tour
    var tour = new Tour();

    // Add your steps. Not too many, you don't really want to get your users sleepy
    tour.addSteps([
      {
      element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
      title: "Title of my step", // string - title of the popover
      content: "Content of my step" // string - content of the popover
    },
  {
    element: "#content1",
    title: "Title of my step",
    content: "Content of my step"
  }
 ]);

 // Initialize the tour
 tour.init();

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


</head>
<body>


<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>



<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.js"></script>
<script src="bootstrap-tour.min.js"></script>
</body>
</html>

我在 google 上搜索过，但似乎没有人在安排旅行时遇到过任何麻烦。我不知道我错过了什么。可以是一些简单的事情。帮帮我，伙计们。我已包含这些文件：

CSS::

Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0

JS::

bootstrap-tour.min.js - v0.8.0
bootstrap-tour.js - v0.8.0
bootstrap-popover.js v2.0.4
bootstrap-tooltip.js v2.0.4
jQuery JavaScript Library v1.9.0

【问题讨论】：

我认为您应该在头部调用您的脚本或将编写的脚本移动到所有库下方。
它需要 jquery 你明白了吗？
不，没有用。我只是尝试了两种方式。
你能显示你正在调用的所有脚本吗？完整的代码？
查看浏览器控制台中抛出的错误。

标签： jquery html twitter-bootstrap bootstrap-tour

【解决方案1】：

见http://jsfiddle.net/4uS59/

你的 html 中有错误的 id

<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>

应该是

<div id="content">
    Hello, World!
</div>
<br><br><br>
<div id="content1">
    Another Hello, World!
</div>

【讨论】：

【解决方案2】：

根据我的经验，当您调用游览脚本时，您必须将阶段放在下面。

因此，您在标签中概述的步骤应该插入到结束标签之前。这应该使这些步骤起作用。目前，您正在为尚未加载的脚本初始化步骤。

所以它应该是这样的：

<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script>
  // Instance the tour
  var tour = new Tour();

  // Add your steps. Not too many, you don't really want to get your users sleepy
  tour.addSteps([
    {
      element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
      title: "Title of my step", // string - title of the popover
      content: "Content of my step" // string - content of the popover
    },
    {
      element: "#content1",
      title: "Title of my step",
      content: "Content of my step"
    }
 ]);

 // Initialize the tour
 tour.init();

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

我就是这样开始工作的。

【讨论】：

你加载了 tour.js 两次。

【解决方案3】：

Bootstraptour 将游览的进度存储在您的 localStorage 中。这也意味着当您尝试设置它时，即。使用了错误的元素 ID，bootstraptour 仍然可以存储它应该在下一次显示步骤 2.. 即使它不存在，此时它什么也不做。

您需要清除浏览器中的 localStorage，或者（可能更简单）更改您的游览名称，如下所示：

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

上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身并发现它试图获取当前步骤“1”而不是“0”后找到了修复，这是错误的索引。

【讨论】：

谢谢你！一直让我发疯试图解决它！

【解决方案4】：

查看示例代码

HTML

<input id="one" value="one"/><br/>
<input id="two" value="two"/><br/>
<input id="three" value="three"/><br/>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

JS

var tour = new Tour();

tour.addStep({
 element: "#one",
 title: "Step 1",
 content: "Content for step 1"
});

tour.addStep({
 element: "#one",
 title: "Step 2",
  content: "Content for step 2"
});

tour.addStep({
  element: "#three",
  title: "Step 3",
 content: "Content for step 3"
});

tour.restart();

Jsfiddle

【讨论】：

小提琴没有显示引导程序。没有找到两个外部文件。
@ST''：对不起。是的，我已经检查过它不起作用。我不知道哪里出了问题。即使我已经尝试过引导旅游网站上的示例，但它不起作用。而不是我找到了几个替代方案，如果您有兴趣，请访问以下链接，tracelytics.github.io/pageguide，tympanus.net/Development/WebsiteTour，alvaroveliz.github.io/aSimpleTour，revaxarts-themes.com/?t=tour

【解决方案5】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My ToDo Application</title>
    <link href="style.css" rel="stylesheet" type = "text/css"/>
    <link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">



</head>
<body>
        <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-tour.min.js"></script>


    <div id = "pop-up">

        <div id="form">

                <h2>Welcome to ToDo Manager</h2><hr>
        <input type="text" id = 'username' placeholder = "Enter ToDo Name here"><br>
        <button value="Continue" id='Create'>Continue</button><br><br>
        <p id = "warning">**<span>NOTE: </span>Refreshing the page will lead to loss of data created**</p>
        </div>
    </div>
    <div id = "body">
    <div>
            <p id = "warning" class = "align">**<span> NOTE: </span>Refreshing the page will lead to loss of data created**</p>
    <h1 id = manager>The ToDo Manager</h1><hr>
    <p id = "hello"></p>
        <input type="text" placeholder = "Enter you Todo here" id = 'newTodo'required><br>
        <button id = "add">Add ToDo</button><br>
        <button id = "remove">Remove ToDo</button> <br>
        <button id = "removeAll">Clear List</button> 

        <ul id="list">


        </ul>
    </div>
    <script src="script.js"></script>
    <script>var tour = new Tour({
            steps: [
            {
              element: "#newTodo",
              title: "Todo Title",
              content: "Enter the name of the task here, to add it in your task list."
            },
            {
              element: "#add",
              title: "Add Button",
              content: "Clicking this will add your new task to the list."
            },
            {
                element: "#remove",
                title: "Delete Button",
                content: "Clicking this will delete the completed (striked) tasks from the list."
            },
            {
               element: "#removeAll",
               title: "Delete all Button",
               content: "Clicking this will delete all the tasks from the list."
            },
            {
                element: "#manager",
                title: "ToDo Manager",
                content: "Hey "+username+"! Dont forget to complete your tasks!"
            }

          ],
          animation: true,
    backdrop: true,  
    storage: false,
    smartPlacement: true,
        });

          // Initialize the tour
          tour.init();

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

</div>
</body>
</html>



why is this not working??

【讨论】：

请解释您的代码，以便其他人更好地理解。

【解决方案6】：

对于其他遇到此问题的人，假设您已经尝试过其他建议，如果将 JQuery 与 Bootstrap Tour 一起使用，将脚本包装在 JQuery onload 函数中对我有用，以确保首先加载所有需求：

$(function() { ... });

像这样：

    <script>
    $(function () {
        // Instance the tour
        var tour = new Tour({
            name: 'one',
            steps: [
                {
                    element: "#my-element",
                    title: "Title of my step",
                    content: "Content of my step"
                },
                {
                    element: "#my-other-element",
                    title: "Title of my step",
                    content: "Content of my step"
                }
            ]
        });

        // Initialize the tour
        tour.init();

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

确保步骤中的每个“元素”都引用了页面上 HTML 元素的 id，以便游览知道它应该指向什么 - 否则它不会显示。

【讨论】：