0

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!

Edited by doc15: left out details

4
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by Airshow
0

Thanks for the replies. After using both of your suggestions I get the same result.
This time FireQuery says it's not a function.

starting to believe tabs() really isn't a function...

Edited by doc15: missed details

0

.tabs() becomes a function with (appropriately composed) jQuery UI properly installed on the page.

Either the .js resource file(s) are badly composed or don't exit or the path(s) are wrong.

See fiddle

Edited by Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.