Home/ Questions/Q 7582767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:31:00+00:00

I am trying to make some tabs with the Jquery ui. My html looks

  • 0

I am trying to make some tabs with the Jquery ui.

My html looks lie this…

<html>

<head>

    <!--use for jquery-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <!--external javascript source-->
    <script type= "text/javascript" src= "javascript/home_scripts.js"> </script>

    <!--css-->
    <link rel="stylesheet" type="text/css" href="css/homepage.css" />


</head>

<body>

    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>

    <div class="panes">
        <div>First tab content. Tab contents are called "panes"</div>
        <div>Second tab content</div>
        <div>Third tab content</div>
    </div>




</body>


</html>

and my javascript file looks like so

$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});

The problem is that when I load my page, there are no tabs. It looks like this 

Tab 1
Tab 2
Tab 3
First tab content. Tab contents are called "panes"
Second tab content
Third tab content

What have I done wrong? I tried to follow the tutorial as best as I could.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your markup to:

    <div class="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">First tab content. Tab contents are called "panes"</div>
    <div id="tab2">Second tab content</div>
    <div id="tab3">Third tab content</div>
</div>

    and your JavaScript to:

    $(function () {
    $("div.tabs").tabs();
});

    The .tabs() function does not take a selector as a parameter. It uses the innerHTML structure of the selected element to make the tabs. Ideally, the href on your anchors should point to an id on the corresponding “pane”

    • 0