jQuery UI Tabs Not Working

Question

I just downloaded jQuery UI Tabs. In the included index.html file, it works fine, CSS and all, with no customization. I copied the files over to my web server, keeping the directory structure intact, and copied the content code to my already-existing index.html, but it does not work.

My Header Code

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<link type="text/css" href="css/start/jquery-ui-1.8.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();              
});
</script>

My Body Code

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>

My Output

* First
* Second
* Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum. Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

All of the files are referenced correctly, and it is all copied and pasted directly from a fully functional file., but it will not work.

Answer 1

Update based on your site - jQuery 1.3 is being included later in the page screwing the pooch here :) Search for and remove this so it's not loaded twice/messing with jQuery UI:

<script src="javascripts/jquery.js" type="text/javascript"></script>

---

Previous answer - In case this is helpful for others to debug later

Try replacing your script section with this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
  $(function(){
    $('#tabs').tabs();              
  });
</script>

Instead of looking to your server for the script/css, it looking at Google's CDN. If that works, then your script files aren't referenced correctly, either permissions on the files, or more likely, an incorrect relative path..or something else. In any case, they're not accessible in js/ relative to the page in that case.

If the files are in mysite.com/js then use /js/ instead of just js/ so the links are relative to the site root.

Answer 2

Use a web developer toolbar (like Firebug or IE Developer Toolbar or whatever comes with Chrome) to view the HTTP response to your javascript and css files. Chances are that the relative url you've posted above isn't correct. If so then you'll see 404 responses in which case you should test that http://yoursite.com/js/jquery-1.4.2.min.js does in fact return the desired content. If it's a 401 response then you may not have the correct file permissions.

HTH.

Update: I can access the javascript and css files. What's the URL of the page you are testing?

Answer 3

Remove the jQuery reference on line 90. (I received help on #jQuery on the Freenode IRC network)