Jquery UI tabs does not appear

Question

So I am having trouble with the tabs UI from Jquery UI. I look aroud kind of a lot of forum but did not find why my tabs do not appear. My css looks good, and the link towads the jquery ui scripts are working.

Here is my code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Home Page - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" />

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

<div id="tabs">
    <ul>
            <li><a href="#tabs-1">Ce soir</a></li>
            <li><a href="#tabs-2">France 1</a></li>
            <li><a href="#tabs-3">France 0</a></li>
            <li><a href="#tabs-4">France 4</a></li>
            <li><a href="#tabs-5">France 3</a></li>
            <li><a href="#tabs-6">France 2</a></li>
            <li><a href="#tabs-7">TF1</a></li>
    </ul>
    <div id="tabs-1">page 0</div>
    <div id="tabs-2">page 1</div>
    <div id="tabs-3">page 2</div>
    <div id="tabs-4">page 3</div>
    <div id="tabs-5">page 4</div>
    <div id="tabs-6">page 5</div>
    <div id="tabs-7">page 6</div>
</div>
        <footer>

        </footer>

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>


    </body>
</html>

Any idea of waht is wrong ?

Thanks a lot.

Guillaume

+1: Retagged a bit as this particular issue has nothing to do w/ the MVC aspect of your page — BLSully
– BLSully, Commented Sep 25, 2012 at 20:05

BLSully · Accepted Answer · 2012-09-25 19:58:52Z

5

You need to put your script block AFTER your includes

Working fiddle: http://jsfiddle.net/BLSully/4ZJns/

The reason: $ is not defined in your page where the script block is currently. The other option is to put your includes near the top or in the <head>.... but near the end should theoretically improve page load time in JS heavy pages

answered Sep 25, 2012 at 19:58

BLSully

5,9291 gold badge29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek · Accepted Answer · 2012-09-25 20:01:25Z

2

Move your script block to the bottom after you load the .js files.

answered Sep 25, 2012 at 20:01

Derek

1324 bronze badges

1 Comment

Guigui Over a year ago

You were right, putting the script a the end worked for me. Thanks a lot for your help

Collectives™ on Stack Overflow

Jquery UI tabs does not appear

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related