0

大家好，我是 jquery noobie，刚开始 jqueryUI

问题概述： 我正在尝试使用其中有一个 JqueryUI 拆分按钮（未呈现）的 jqueryUI 选项卡。Cheddar 、Mushrooms 和 Bocon 应该被渲染为拆分按钮。我已经从网站复制了标记和 jquery，所以我不会犯任何错误，但它仍然不起作用。 火狐快照 在此处输入图像描述

代码：
我为你们创建了一个jsfiddle，但它不像在我的浏览器中那样工作。
jQuery

    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
    rel="Stylesheet" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs(); //Vstudio intellisense shows .tabs() and .buttonset()
        $('#Toppings').buttonset(); //this means JqueryUi is attached.
    }
    );

HTML

<div id="MainBox">
    <!--MainBox-->
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Step 1: Your Background</a></li>
            <li><a href="#tabs-2">Step 2: Your Finances</a></li>
            <li><a href="#tabs-3">Step 3: Your Results</a></li>
        </ul>
        <div id="tabs-1">
            <div class="subBox">
                <div class="smallBox">
                    fgggghgh</div>
                <div class="smallBox">
                    fgggghgh</div>
                <div class="smallBox">
                    fgggghgh</div>
                <div class="smallBox">
                    fgggghgh</div>
            </div>
            <div class="subBox">
            </div>
            <div class="subBox">
            </div>
            <div class="subBox">
            </div>
        </div>
        <div id="tabs-2">
            <div id="Toppings">
                <input type="checkbox" id="checkbox1" />
                <label for="check1">
                    Cheddar
                </label>
                <input type="checkbox" id="checkbox2" />
                <label for="check2">
                    Mushrooms
                </label>
                <input type="checkbox" id="checkbox3" />
                <label for="check3">
                    Bacon
                </label>
            </div>
        </div>
        <div id="tabs-3">
            <p>
                Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
                pede vel vehicula accumsan, mi neque rutrum erat,Really dummy text.</p>
            <p>
                Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
                ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.Really dummy text twoS.</p>
        </div>
    </div>
</div>
4

1 回答 1

1

I think it will work, if you change your labels to point to the correct input elements. The for="" attribute has to equal the id of the input.

example:

<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Cheddar</label>
于 2012-06-17T14:25:04.043 回答