JQuery UI вкладки не работают должным образом - PullRequest
Новая
       14

JQuery UI вкладки не работают должным образом

2 голосов
/ 03 февраля 2012

я создал следующий код. он показывает вкладки, которые я хочу, но содержимое на странице не меняется, когда я нажимаю на вкладку. содержимое всех вкладок отображается на одной странице. когда я нажимаю на вкладку, ссылка переходит в адресную строку браузера. есть идеи, как остановить эту ссылку и разделить контент на вкладки? Сонахан - Бар 

    <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>

и это мой jquery: 

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

1 Ответ

2 голосов
/ 03 февраля 2012

Плагин jQuery UI Tabs ожидает, что панели (содержимое вкладок) будут внутри контейнера, к которому вы применяете .tabs () для , что не относится к разметке.

Чтобы найти ваши панели (#admin-tabs-1, #admin-tabs-2, ...), плагин будет искать в контейнере #admin-tabs, и из вашей разметки он не найдет ни одной из них, так как они находятся вне контейнера.

У вас есть: 

<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>

Плагин ожидает: 

<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>

Переместите свои панели рядом с <ul>.

Также убедитесь, что вы связали таблицы стилей CSS, которые входят в комплект библиотеки jQuery UI.

Ваша разметка: DEMO

Ожидаемая разметка: DEMO

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...