我在一个页面中有这段代码。我试图让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>我在谷歌上搜索了一下,但似乎没有人在获得巡演设置方面有任何麻烦。我不知道我错过了什么。可以是一些简单的事情。帮帮我。我已经包含了这些文件:
CSS:
Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0JS::
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发布于 2014-05-22 13:03:35
请参阅http://jsfiddle.net/4uS59/
您在yout html中有错误的in
<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>发布于 2014-02-05 18:56:39
根据我的经验,当你调用巡演脚本时,你必须把下面的阶段放在下面。
因此,您在标记中概述的步骤应该插入在结束标记之前。这应该会使这些步骤工作起来。当前您正在为尚未加载的脚本初始化步骤。
所以它应该看起来像这样:
<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>我就是这样让我的手机工作的。
发布于 2014-09-02 18:00:24
Bootstraptour在你的localStorage中存储了浏览的进度。这也意味着当你试图设置它的时候。使用了错误的元素ID,bootstraptour仍然可以存储下一次应该显示的步骤2。即使它不存在,在这一点上它也不做任何事情。
您需要在浏览器中清除您的localStorage,或者(可能更简单),像这样更改您的教程的名称:
var tour = new Tour({
name: '<some random name>'
});上面的方法对我有效,因为我也有同样的问题。在调试代码本身并发现它试图获取当前步骤"1“而不是"0”后,我找到了修复程序,这是错误的索引。
https://stackoverflow.com/questions/20816893
复制相似问题