我刚刚遇到引导程序并尝试将其实施到我的网站中，但它无法启动或工作。tour.start我已经进行了研究，并试图通过制作真实来使其发挥作用。尝试将其附加到按钮以启动但没有成功。
在标题中我有：
<link href="../css/bootstrap-tour.min.css" rel="stylesheet">
<script src="../js/bootstrap-tour.min.js"></script>
<script src="../js/tour.js"></script>
中的代码tour.js是：
// Content vars
var step1 = "This is the navigation bar you will use to move through the site. If the bar doesn't work, the links in the footer will be your backup.",
step2 = "You will use these buttons to navigate through the different months that scholarships are due. The greyed out buttons are months that have either no scholarships or have all passed due scholarships.",
step3 = "These months are greyed out becuase either all of their scholarships are past due or that month has no scholarships due that month.",
step4 = "",
step5 = "",
step6 = "",
step7 = "",
step8 = "",
step9 = "",
step10 = "",
step11 = "",
step12 = "",
step13 = "";
// create the tour
var tour = new Tour({
name: "tour",
steps: [
{
element: "#sdt_menu",
placement: "bottom",
title: "Menu Bar",
content: "step1",
next: 0,
prev: 0,
animation: true,
container: "body",
backdrop: true,
backdropPadding: false,
redirect: true,
reflex: false,
orphan: false
},
{
element: "#myNav",
placement: "right",
title: "Month Navigation",
content: step2,
next: 0,
prev: 0,
animation: true,
container: "body",
backdrop: true,
backdropPadding: false,
redirect: true,
reflex: false,
orphan: false
},
{
element: ".noScholarBtn",
placement: "right",
title: "Greyed Out Months",
content: step3,
next: 0,
prev: 0,
animation: true,
container: "body",
backdrop: true,
backdropPadding: false,
redirect: false,
reflex: false,
orphan: false
}
],
container: "body",
keyboard: true,
storage: window.localStorage,
debug: false,
backdrop: false,
backdropPadding: 0,
redirect: true,
orphan: false,
duration: false,
delay: false,
basePath: "",
template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-default' data-role='prev'>« Prev</button><span data-role='separator'>|</span><button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default' data-role='end'>End tour</button></nav></div>"
});
// add steps to the tour
// Initialize the tour
tour.init();
// Start the tour
tour.start(true);
我对不同的步骤有多个 var 引用，因为我计划在我开始工作后添加更多步骤。
html如下：
<!doctype html>
<html><!-- InstanceBegin template="/Templates/remixTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="author" content="Thomas Joseph Kirschbaum" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Scholarships - Local/National</title>
<!-- InstanceEndEditable -->
<link rel="shortcut icon" href="http://www.collegescholarship4u.com/favicon.ico">
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<link href="../css/mockup4.css" rel="stylesheet" type="text/css">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><link rel="stylesheet" type="text/css" href="http://www.collegescholarship4u.com/css/ie.css" /><![endif]-->
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- start -->
<!-- redirect users if they have javascript disabled -->
<noscript>
<meta http-equiv="refresh" content="0; URL=http://www.collegescholarship4u.com/pages/nojs.html">
</noscript>
<!-- end -->
<script src="../js/respond.min.js"></script>
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/modernizr.custom.js"></script>
<script src="../js/TweenMax.min.js"></script>
<script src="../js/ScrollToPlugin.min.js"></script>
<script>$(function() {$('a[href*=#]:not([href=#])').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {var target = $(this.hash);target = target.length ? target : $('[name=' + this.hash.slice(1) +']');if (target.length) {$('html,body').animate({scrollTop: target.offset().top}, 2000);return false;}}});});</script> <!-- Smooth scroll to element -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40293119-6', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('send', 'pageview');
</script>
<!-- InstanceBeginEditable name="head" -->
<link href="../css/bootstrap-tour.min.css" rel="stylesheet">
<script src="../js/bootstrap-tour.min.js"></script>
<script src="../js/tour.js"></script>
<link rel="stylesheet" type="text/css" href="../Timeline/css/timeline.css">
<!--[if IE]><script src="http://www.collegescholarship4u.com/Timeline/js/timlineAnimationsIE.js"></script><![endif]-->
<![if !IE]><script src="http://www.collegescholarship4u.com/Timeline/js/timlineAnimations.js"></script><![endif]>
<!-- InstanceEndEditable -->
</head>
<body>
<a id="top"></a>
<!---------------- Mobile Menu -------------------->
<ul id="gn-menu" class="gn-menu-main">
Not all of the html is shown. Only the html that is needed.
</ul>
<div id="wrap" class="wrap"> <!-- The Header. Do NOT delete what seems to be unneccesary code for the header. EVERYTHING IS NEEDED. -->
<div class="mockup">
<img class="mockup__img" alt="Banner Background" src="../images/mockup4.jpg" />
<div class="mobile"><ul id="slideshow-1" class="slideshow"><li class="slideshow__item"></li><li class="slideshow__item"></li><li class="slideshow__item"></li><li class="slideshow__item"></li></ul></div>
<div class="screen"><ul id="slideshow-2" class="slideshow"><li class="slideshow__item current"></li><li class="slideshow__item"></li><li class="slideshow__item"></li><li class="slideshow__item"></li></ul></div>
<header class="header-words">
<h1><span id="swFl">SW Florida</span> <div id="FASI">FASI</div> <i id="header-details">Scholarships, Financial Aid and College Information!<br/>Funded By <a id="headerCapeCoralChamberofCommerce" href="http://www.capecoralchamber.com/" target="_blank">Cape Coral Chamber of Commerce</a></i> </h1>
<a id="downArrow" href="#menuCheckpoint"><img src="../images/downIcon.png" width="100" height="100" alt="Go Down"></a>
</header>
</div>
</div>
<nav>
<a id="menuCheckpoint"></a>
<ul id="sdt_menu" class="sdt_menu">
The full html is not shown, to be able to consolidate.
</ul>
</nav>
<!-- InstanceBeginEditable name="content" -->
<div class="container">
<section class="regular">
<h2>Local & National Scholarships</h2>
Here you will find very useful information on local and national scholarships for the 2014-2015 school year. Including summer.
<br>
<br>
Scholarships are always being added and edited! So check back often for updates or additions!
<br>
<br>
Page Updated: <!-- #BeginDate format:Am1a -->May 8, 2015 10:06 AM<!-- #EndDate -->
</section>
<hr class="style-one noScholarships hide">
<section class="regular noScholarships hide">
<h2>Oh No!</h2>
The scholarships on this page are currently outdated and we are working hard to update them as soon as we can! Bare with us,
for we are trying our hardest to deliver the scholarships as soon as we can!
</section>
<div class="col-xs-3">
<ul class="nav nav-tabs nav-stacked" id="myNav">
<!--
If there is a month with absolutly no scholarships, then you
don't have to worry about deleting that month's button. The
jquery I typed up will automatically hide a month's button if
it can't find a single scholarship with that month's corresponding
class. Ex. April's corresponding class for a scholarship is "4".
-->
<li id="example"><a href="#Example">Example</a></li>
<li id="8btnContainer" class="noScholarBtn"><a id="8btn">August</a></li>
<li id="9btnContainer" class="noScholarBtn"><a id="9btn">September</a></li>
<li id="10btnContainer" class="noScholarBtn"><a id="10btn">October</a></li>
<li id="11btnContainer" class="noScholarBtn"><a id="11btn">November</a></li>
<li id="12btnContainer" class="noScholarBtn"><a id="12btn">December</a></li>
<li id="1btnContainer" class="noScholarBtn"><a id="1btn">Janurary</a></li>
<li id="2btnContainer" class="noScholarBtn"><a id="2btn">February</a></li>
<li id="3btnContainer" class="noScholarBtn"><a id="3btn">March</a></li>
<li id="4btnContainer" class="noScholarBtn"><a id="4btn">April</a></li>
<li id="5btnContainer" class="noScholarBtn"><a id="5btn">May</a></li>
<li id="6btnContainer" class="noScholarBtn"><a id="6btn">June</a></li>
<li id="7btnContainer" class="noScholarBtn"><a id="7btn">July</a></li>
<li><a id="showUpcomingbtn">Upcoming</a></li>
<li><a id="showbtn">All</a></li>
<li id="showex"><a id="showEx">Show Example</a></li>
</ul>
</div>
<ul class="cbp_tmtimeline" id="timeline">
<!--
1: Jan
2: Feb
3: Mar
4: Apr
5: May
6: Jun
7: Jul
8: Aug
9: Sep
10: Oct
11: Nov
12: Dec
**All Times are in Eastern Standard Time. Make sure you
look at the scholarship's website to know when EXACTLY
their due date is and at what time. Some scholarships
are due in Central Time.
**Refer to the Adding a New Scholarship Word Document for instructions on how to add new scholarships
-->
<li id="Example">
<time class="cbp_tmtime" id="exTime" datetime="MM/DD/YYYY 23:59"><span>Due Date</span></time>
<div class="cbp_tmicon" id="exIcon"></div>
<div class="cbp_tmlabel" id="exLabel">
<h2>Scholarship Name - Example<div><a id="exitEx">X</a></div></h2>
<p>Here you will see the scholarship details. The date is when the application is due for that specific scholarship! If there is no date then you have to click the link to view the scholarship's deadline! You can also click the circle on the line to go to the top of the page.</p>
</div>
</li>
<!------- Rolling Due Date Scholarships --------->
<li class="month start" data-due-date="08/01/2015 23:59">
<time class="cbp_tmtime"><span class="rollingDue">Rolling Due Date</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel">
<h2>‘START’ Biology & Environmental Science Scholarship</h2>
<p>Planning to major in biology or environmental science? If you’ve got the grades, the aptitude and the desire and enthusiasm to play an active role in your science education at Johnson State College, we may have a START Science Scholarship waiting here for you. START scholars can receive up to $10,000 for two years. The scholarship is funded by a major grant from the National Science Foundation that runs from 2012 to 2017. You May Be Eligible for a START Scholarship if you…
<ul>
<li>Are majoring in Biology or Environmental Science at JSC;</li>
<li>Have a minimum 3.0 grade point average;</li>
<li>Have no more than 60 college credits; and</li>
<li>Have financial need as documented on your FAFSA (loans count!).</li>
</ul>
<br>
Visit their website for more info and apply.
</p>
<br>
<a href="http://www.jsc.edu/academics/environmental-health-sciences/beyond-the-classroom/start-biology-environmental-science-scholarships" class="weblink" target="_blank">Website</a> <a class="seperate">|</a> <a class="pdf noPDF">PDF</a>
</div>
</li>
<!------- September Scholarships (9) --------->
<li class="month 9 start" data-due-date="09/11/2014 23:59">
<time class="cbp_tmtime"><span>Sept. 11, 2014</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel">
<h2>Healthy Lifestyles Scholarship</h2>
<p>There is no Formal Scholarship Application. To apply for the Healthy Lifestyles Scholarship, please write your scholarship essay in Microsoft Word or, if you do not have Microsoft Word, in Google office, the latter is free to use on the Internet. After you are finished the writing process, please attach it to an email and send it to: studentaward@fitnessexercises.tv. If you have any questions or concerns, please forward them to Linda Wells (linda.wells@fitnessexercises.tv ). </p>
<br>
<a href="http://www.fitnessexercises.tv/scholarships.php" class="weblink" target="_blank">Website</a> <a class="seperate">|</a> <a class="pdf noPDF">PDF</a>
</div>
</li>
</ul>
</div>
<!-- InstanceEndEditable -->
<footer id="footer">
<section>
<article>
<!--<a href="#top" class="up-btn"><div class="glyphicon glyphicon-chevron-up"></div></a>-->
<h2>Basic</h2>
<a id="homeFooter" href="../">Home</a> | <a id="aboutFooter" href="about_us.html">About Us</a> | <a id="scholarshipFooter" href="scholarships.html">Scholarships</a> | <a id="techSchoolsFooter" href="technical_schools.html">Techinical Schools</a> | <a id="resourcesFooter" href="resources.html">Resources</a> | <a id="contactFooter" href="contact.html">Contact Us</a> | <a id="sitemapFooter" href="sitemap.html">Sitemap</a>
<p class="allrights">All Rights Reserved.</p>
<p>Copyright Lee County Public Schools and Cape Coral Chamber of Commerce.</p>
Logo's, Trademarks or other third-party representative image in this website has been posted with the consent of its owners. Links to third-party Web sites are neither hosted nor endorsed by The School District of Lee County or Cape Coral Chamber of Commerce.
</article>
<article>
<h2>Locations</h2>
<span>
Lee County School District<br>
<a id="LeeCountySchoolDistrictMapsFooter" href="https://www.google.com/maps/place/2855+Colonial+Blvd,+Fort+Myers,+FL+33966/@26.5996907,-81.8535833,17z/data=!3m1!4b1!4m2!3m1!1s0x88db6a8fc375aa4f:0xa2b8c56744082976?hl=en" target="_blank">2855 Colonial Blvd, <br>
Fort Myers, Florida, 33966</a><br>
Telephone: (239) 344 - 1102 <br>
TTD/TTY: (239) 355 - 1512 <br>
<a id="LeeCountySchoolDistrictWebsiteFooter" href="http://www.leeschools.net/" target="_blank" class="external">www.leeschools.net</a>
</span>
<span>
Cape Coral Chamber of Commerce<br>
<a id="CapeCoralChamberofCommerceMapsFooter" href="https://www.google.com/maps/place/2051+Cape+Coral+Pkwy+E,+Cape+Coral,+FL+33904/@26.563098,-81.936402,17z/data=!3m1!4b1!4m2!3m1!1s0x88db3f5ea57b1875:0xae304929d4bd3c57?hl=en" target="_blank">2051 Cape Coral Parkway E<br>
Cape Coral, Florida 33904</a><br>
Office: (239) 549 - 6900<br>
Toll Free: (800) 226 - 9609<br>
<a id="CapeCoralChamberofCommerceWebsiteFooter" href="http://www.capecoralchamber.com/" target="_blank" class="external">www.capecoralchamber.com </a>
</span>
</article>
</section>
</footer>
<!-- InstanceBeginEditable name="scripts" -->
<!-- InstanceEndEditable -->
<script src="../Mobile%20Menu/js/classie.js"></script>
<script src="../Mobile%20Menu/js/gnmenu.js"></script>
<script type="text/javascript" src="../js/jquery.min.1.4.2.js"></script>
<script src="../js/jquery.min.1.11.1.js"></script>
<script src="../js/bootstrapJquery.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/main.js"></script>
<script>new gnMenu( document.getElementById( 'gn-menu' ) );</script>
<script type="text/javascript">$(function() {/*** for each menu element, on mouseenter,* we enlarge the image, and show both sdt_active span and* sdt_wrap span. If the element has a sub menu (sdt_box),* then we slide it - if the element is the last one in the menu* we slide it to the left, otherwise to the right*/$('#sdt_menu > li').bind('mouseenter',function(){var $elem = $(this);$elem.find('article').stop(true).animate({'width':'100%','height':'100%'/*'left':'0px'*/},400,'linear')/* original: easeOutBack*/.andSelf().find('.sdt_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.sdt_active').stop(true).animate({'height':'170px'},300,function(){var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length){var left = '100%';if($elem.parent().children().length == $elem.index()+1)left = '-155px';$sub_menu.show().animate({'left':left},200);}});}).bind('mouseleave',function(){var $elem = $(this);var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length)$sub_menu.hide().css('left','0px');$elem.find('.sdt_active').stop(true).animate({'height':'0px'},300).andSelf().find('article').stop(true).animate({'height':'0px'},400)/*'width':'100%''left':'85px'},400)*/.andSelf().find('.sdt_wrap').stop(true).animate({'top':'15px'},500);});});</script>
<script>/*loading effect sorta */$('#swFl').addClass("fadeIn");setTimeout(function(){$('#FASI').addClass("fadeIn");}, 600);setTimeout(function(){$('#header-details').addClass("fadeIn");}, 1200);setTimeout(function(){$('#downArrow').addClass("fadeInFloatDown");}, 1800);</script>
<script>(function() {new Slideshow( document.getElementById( 'slideshow-1' ) );setTimeout( function() {new Slideshow( document.getElementById( 'slideshow-2' ) );}, 1750 );/* Mockup responsiveness */var body = docElem = window.document.documentElement,wrap = document.getElementById( 'wrap' ),mockup = wrap.querySelector( '.mockup' ),mockupWidth = mockup.offsetWidth;scaleMockup();function scaleMockup() {var wrapWidth = wrap.offsetWidth,val = wrapWidth / mockupWidth;mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';}window.addEventListener( 'resize', resizeHandler );function resizeHandler() {function delayed() {resize();resizeTimeout = null;}if ( typeof resizeTimeout != 'undefined' ) {clearTimeout( resizeTimeout );}resizeTimeout = setTimeout( delayed, 50 );}function resize() {scaleMockup();}})();</script>
</body>
<!-- InstanceEnd --></html>