jQuery UI Tabs Not Working

Posted by Christopher on Stack Overflow See other posts from Stack Overflow or by Christopher
Published on 2010-04-27T00:38:11Z Indexed on 2010/04/27 0:43 UTC
Read the original article Hit count: 656

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript