Question

我创建了以下代码。它显示了我想要的标签但是当我点击标签时页面上的内容没有改变。所有选项卡的内容显示在同一页面上。当我点击一个标签时，链接进入浏览器的地址栏。任何想法如何阻止这种链接发生，并将内容分成标签？ 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>

这是我的jquery：

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

Answer 1

插件jQuery UI选项卡要求面板（选项卡内容）在上应用.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>旁边。

还要确保链接了随jQuery UI库一起提供的CSS样式表。

您的加价：DEMO

预期加价：DEMO

jquery ui tabs没有按预期工作

1 个答案: