首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何让bootstrap-tour工作?

如何让bootstrap-tour工作?
EN

Stack Overflow用户
提问于 2013-12-29 00:44:11
回答 6查看 15.6K关注 0票数 3

我在一个页面中有这段代码。我试图让bootstrap-tour工作,但它不能实现。我做错了什么?这里我漏掉了什么?

代码语言:javascript
复制
<!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>

我在谷歌上搜索了一下,但似乎没有人在获得巡演设置方面有任何麻烦。我不知道我错过了什么。可以是一些简单的事情。帮帮我。我已经包含了这些文件:

CSS:

代码语言:javascript
复制
Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0

JS::

代码语言:javascript
复制
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
EN

回答 6

Stack Overflow用户

发布于 2014-05-22 13:03:35

请参阅http://jsfiddle.net/4uS59/

您在yout html中有错误的in

代码语言:javascript
复制
<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>

应该是

代码语言:javascript
复制
<div id="content">
    Hello, World!
</div>
<br><br><br>
<div id="content1">
    Another Hello, World!
</div>
票数 6
EN

Stack Overflow用户

发布于 2014-02-05 18:56:39

根据我的经验,当你调用巡演脚本时,你必须把下面的阶段放在下面。

因此,您在标记中概述的步骤应该插入在结束标记之前。这应该会使这些步骤工作起来。当前您正在为尚未加载的脚本初始化步骤。

所以它应该看起来像这样:

代码语言:javascript
复制
<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>

我就是这样让我的手机工作的。

票数 4
EN

Stack Overflow用户

发布于 2014-09-02 18:00:24

Bootstraptour在你的localStorage中存储了浏览的进度。这也意味着当你试图设置它的时候。使用了错误的元素ID,bootstraptour仍然可以存储下一次应该显示的步骤2。即使它不存在,在这一点上它也不做任何事情。

您需要在浏览器中清除您的localStorage,或者(可能更简单),像这样更改您的教程的名称:

代码语言:javascript
复制
var tour = new Tour({
    name: '<some random name>'
});

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20816893

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档