Home/ Questions/Q 7408153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:51:42+00:00

ive created the following code. it shows the tabs i want but the content

  • 0

ive created the following code. it shows the tabs i want but the content on the page doesnt change when i click a tab. the content for all the tabs is shown on the same page. when i click a tab the link goes in the address bar in the browser.
any ideas how to stop this link happening and to get the content separated into tabs?

Sonachan – Bar

    <link href="/scripts/jui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
    <link href="/styles/layout.css" rel="stylesheet" type="text/css" />

    <script src="/scripts/jquery.js"></script>
    <script src="/scripts/jui/jquery-ui.js"></script>
    <script src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/scripts/main.js"></script>
</head>
<body>
    <div id="container">
        <div id="admin-tabs" class="col">
            <ul>
                <li>
                    <a href="#admin-tabs-1"><span>Add an Item</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-2"><span>Change an Item</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-3"><span>Add a Category</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-4"><span>Change a Category</span></a>
                </li>
            </ul>
        </div>
        <div id="admin-page">
            <?php //add an item ?>
            <div id="admin-tabs-1">

                <div class="admin-heading">Add an item</div>
                <form id="additemform">
                    <table>
                        <tr>
                            <td>
                                Select a category:
                            </td>
                            <td></td>
                            <td>
                                <select>
                                    <?php foreach (Category::model()->findAll() as $category): ?>
                                        <option id="cat-<?php echo $category->id; ?>"><?php echo $category->name; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product name:
                            </td>
                            <td></td>
                            <td>
                                <input></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product price:
                            </td>
                            <td id="poundsign">£</td>
                            <td colspan="2">
                                <input id="price-pounds"></input>
                                .
                                <input id="price-pence" maxlength="2"></input>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="submit" value="Create!"></input></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="admin-tabs-2">
                content of tab 2
            </div>
            <div id="admin-tabs-3">
                content of tab 3
            </div>
            <div id="admin-tabs-4">
                content of tab 4
            </div>
        </div>
</body>

and this is my jquery :

$(function() {
$("#admin-tabs" ).tabs();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The plugin jQuery UI Tabs expects the panels (tab content) to be within the container you apply the .tabs() on, which is not the case with your markup.

    To find your panels (#admin-tabs-1, #admin-tabs-2, …), the plugin will search into the container #admin-tabs and from your markup it does not find any of them as they are outside the container.

    You have:

    <div#admin-tabs>
    <ul>
        <li #admin-tabs-1>
        <li #admin-tabs-2>
        <li #admin-tabs-3>
    </ul>
</div>
<div>
    <div#admin-tabs-1>
    <div#admin-tabs-2>
    <div#admin-tabs-3>
</div>

    The plugin expects:

    <div#admin-tabs>
    <ul>
        <li #admin-tabs-1>
        <li #admin-tabs-2>
        <li #admin-tabs-3>
    </ul>
    <div#admin-tabs-1>
    <div#admin-tabs-2>
    <div#admin-tabs-3>
</div>

    Move your panels next to the <ul>.

    Also make sure you linked the CSS stylesheets that comes along with the jQuery UI library.

    Your markup: DEMO

    Expected markup: DEMO

    • 0