Hello all,
Recently, I began learning JS to start creating websites. So far I have a working idea of what the DOM is & how to access elements within a document.
I've also heard how jQuery & jQuery UI can increase functionality/productivity/interactivity & just about any other "ity" word you can think of.
So, now I'm experimenting with these two libraries by trying to create tabs. From the docs I've read it appears that my code agrees with everything as explained. The problem I'm having seems more technical than conceptual.
I can't get the tabs to display in the page. Firefox 11 gives an error saying:
$('#tabs').tabs is not a function
The code resides inside an external .js file (myTabs.js) linked to the .html file:
$(document).ready(function () {
$('#tabs').tabs();
});
The HTML so far:
<link rel="stylesheet" type="text/css" href="js/1.7.3/css/ui.1.7.3.css" />
<script type="text/javascript" src="js/jquery.1.3.2.js"></script>
<script type="text/javascript" src="js/ui-1.7.3/ui.core.js"></script>
<script type="text/javascript" src="js/ui-1.7.3/ui.tabs.js"></script>
<script type="text/javascript" src="js/myTabs.js"></script>
<div id="tabs">
<ul>
<li><a href="#description">Description</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="contactMe">Contact me</a></li>
</ul>
<div id="description">
PANEL 1
</div>
<div id="examples">
PANEL 2
</div>
<div id="contactMe">
PANEL 3
</div>
</div>
All help & criticism is welcome and appreciated. The page validates properly as HTML5.
Much Thanks!