在我的网站上，我使用的代码与官方的boostraptour.com网站上的代码非常相似，但我甚至没有获得第一个游戏弹出窗口。我已经在 JSFiddle 设置了测试区域，但我仍然没有成功。我错过了什么吗？
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-tour.min.css" rel="stylesheet">
<style>
.jumbotron {
margin-bottom: 0px;
background-image: url(../assets/images/caterhamimage.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-color: #000000;
text-shadow: black 0.3em 0.3em 0.3em;
}
</style>
<script>
var tour = new Tour();
tour.addSteps: ([
{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
},
{
element: "#tour2",
title: "Daily Brief",
content: "This widget is updated every day and gives you a glimpse at what is going on in and around school. This could include matches, interest talks or special days specific to a particular year group."
},
{
element: "#accordion",
title: "Quick Views",
content: "This collection of collapsible widgets allows you to take a quick look at vital information right from your dashboard. You can see your lessons for today or any important reminders that you or a teacher may have set."
},
{
element: "#lunchmenu",
title: "Lunch Menu",
content: "This widget shows you what is for lunch so that you can plan what you want before you even get there. Updated daily, it is one of the best ways to get information about school food!"
},
{
element: "#navbar",
title: "The Navigation Bar",
content: "Whilst there is a lot of information directly on your dashboard, you can take a look at it on these!"
}]);
// Initialize the tour
tour.init();
$('#tour-go').click(function () {
// Start the tour
tour.start();
});
});
</script>
</head>
<body>
<?php include 'header.php'; ?>
<div class="jumbotron">
<h1>Welcome to Your Dashboard, <?php echo "$studentName"; ?>!</h1>
<p>You have <?php echo "$numberOfHomeworksOutstanding"; ?> homeworks!</p>
<p><a class="btn btn-primary btn-lg" role="button" id="tour-go">Take a look!</a></p>
</div>
<br clear='all'>
<div class="row">
<div class="col-md-4">
<div class="list-group" id="tour1">
<a href="homework.php" class="list-group-item list-group-item-warning">
<h4 class="list-group-item-heading">Maths Circle Theorems - 08/06/12 p.4</h4>
<span class="badge">14 hrs left</span>
<p class="list-group-item-text">Page 34, Exercise 3</p>
</a>
<a href="homework.php" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<span class="badge">14</span>
<p class="list-group-item-text">...</p>
</a>
<a href="homework.php" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<span class="badge">14</span>
<p class="list-group-item-text">...</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" id="tour2">
<div class="panel-heading"><strong>Daily Update - <?php echo date("l j") ?><sup><?php echo date("S") ?></sup><?php echo date(" \of F Y"); ?></strong></div>
<div class="panel-body">
Panel content
</div>
</div>
<br clear="all" />
<br clear="all" />
<div class="panel panel-default" id="lunchmenu">
<div class="panel-heading"><strong>Today's Lunch Menu</strong></div>
<div class="panel-body">
<p>Pea and Watercress Soup with Fresh Bread<br />
Cumberland Rings with Onion Gravy and Mashed potato with Broccoli and Carrots<br />
Chinese Chicken Stir Fry with Sweet & Sour Noodles<br />
Chilli sauce dip<br />
Prawn crackers<br />
Sweet potato and Spring Onion Frittata (VEGETARIAN)<br />
Pasta with Chicken & Leak or Neapolitan Sauce<br />
Lemon Drizzle Cake</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Quick Timetable
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Quick Reminders
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/tour.js"></script>
<script src="../js/bootstrap-tour.min.js"></script>
答案 0 :(得分：0)
在:之后删除addSteps：
var tour = new Tour();
tour.addSteps([{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
}, {
//...
您还可以初始化以下步骤：
var tour = new Tour({
steps:[{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
}]
});
<强> jsFiddle
P.S。还要确保在加载javascript源文件后初始化tour。