Copy link to clipboard
Copied
Ever have one of those days? I just wasted 3 hours tracking this down.
I had this document open and the JS Tabbed panels would not fire in any browser. WAMP is my local testing server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">INTRO</a></li>
<li><a data-toggle="tab" href="#menu2">DEMO</a></li>
<li><a data-toggle="tab" href="#menu3">HTML</a></li>
<li><a data-toggle="tab" href="#menu4">CSS</a></li>
<li><a data-toggle="tab" href="#menu5">JAVASCRIPT</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1">
<h3>Title:</h3>
<p>content</p>
</div>
<div class="tab-pane fade" id="menu2">
<h3>Title:</h3>
<p>content</p>
</div>
<div class="tab-pane fade" id="menu3">
<h3>HTML</h3>
<pre><code>Code goes here...</code></pre>
<p> </p>
</div>
<div class="tab-pane fade" id="menu4">
<h3>CSS</h3>
<pre><code>Code goes here...</code></pre>
<p> </p>
</div>
<div class="tab-pane fade" id="menu5">
<h3>JavaScript</h3>
<pre><code>Code goes here...</code></pre>
<p> </p>
</div>
<!--end tabs--></div>
</div>
</div>
</div>
<!--Bootstrap JS-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
Good grief! It turns out jQuery must load first otherwise Bootstrap doesn't load.
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--Bootstrap JS-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
Go figure...
Nancy O.
Copy link to clipboard
Copied
If you missed the comment that said "<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->" in the basic template code example on http://getbootstrap.com/getting-started/#template then the first line of bootstrap.js should of tipped you off:
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");
best,
Shocker
Copy link to clipboard
Copied
But I had jQuery in the document. However, it came AFTER Bootstrap.js
Evidently, stacking order is crucial. JQ must load first.
Lesson learned.
Nancy O.