我在页面中有这个代码。我正在尝试使用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.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
答案 0 :(得分：6)
你的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>
答案 1 :(得分：4)
根据我的经验，您在调用游览脚本时必须将这些阶段放在下面。
因此，应在结束标记之前插入标记中列出的步骤。这应该使步骤工作。目前，您正在初始化尚未加载的脚本的步骤。
所以看起来应该是这样的：
<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>
这就是我让我的工作方式。
答案 2 :(得分：3)
Bootstraptour将巡演的进度存储在localStorage中。这也意味着当你试图设置它时，即。使用了错误的元素ID，bootstraptour仍然可以存储它应该下次显示第2步..即使它不存在，此时它什么也不做。
您需要在浏览器中清除localStorage，或者（可能更容易），更改您的游览名称，如下所示：
var tour = new Tour({
name: '<some random name>'
});
上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身后找到了修复程序并发现它试图将currenttep设为“1”而不是“0”，这是错误的索引。
答案 3 :(得分：1)
检查示例代码
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();
答案 4 :(得分：0)
对于其他任何登陆此问题的人，假设您已尝试过其他建议，如果将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，以便游览知道应该指向的内容 - 否则它将不会显示。
答案 5 :(得分：0)
<!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??