Home/ Questions/Q 8590021
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:11:51+00:00

So I am having trouble with the tabs UI from Jquery UI. I look

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0