jquery - jQuery UI 选项卡：即使定义了选项卡，片段标识符也不匹配

Question

我的文档中定义了以下选项卡。

<div class="bill-selection-tab">
                <ul>
                    <li class="tab active">
                        <div class="tab_left"></div>
                        <div class="tab_right"></div>
                        <div class="tab_proper">
                            <img alt="open-bills" src="images/open-bill-active.png"/>
                            <a href="#open-tab">OPEN</a>
                        </div>
                    </li>
                    <li class="tab">
                        <div class="tab_left"></div>
                        <div class="tab_proper">
                            <img alt="settled-bills" src="images/settled-bill.png"/>
                            <a href="#settled-tab">SETTLED</a>
                        </div>
                        <div class="tab_right"></div>
                    </li>
                    <li class="tab">
                        <div class="tab_left"></div>
                        <div class="tab_proper">
                            <img alt="cancel-bills" src="images/cancelled-bill.png"/>
                            <a href="#closed-tab">CANCEL</a>
                        </div>
                        <div class="tab_right"></div>
                    </li>
                </ul>
            </div>

<div id="open-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

                <div id="closed-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

                <div id="settled-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

所需的选项卡已定义，但仍会引发异常。我在这里做错了什么！

Answer 1

问题是目标元素不在元素tab内部bill-selection-tab。

尝试

<div class="bill-selection-tab">
    <ul>
        <li class="tab active">
            <div class="tab_left"></div>
            <div class="tab_right"></div>
            <div class="tab_proper">
                <img alt="open-bills" src="images/open-bill-active.png"/>
                <a href="#open-tab">OPEN</a>
            </div>
        </li>
        <li class="tab">
            <div class="tab_left"></div>
            <div class="tab_proper">
                <img alt="settled-bills" src="images/settled-bill.png"/>
                <a href="#settled-tab">SETTLED</a>
            </div>
            <div class="tab_right"></div>
        </li>
        <li class="tab">
            <div class="tab_left"></div>
            <div class="tab_proper">
                <img alt="cancel-bills" src="images/cancelled-bill.png"/>
                <a href="#closed-tab">CANCEL</a>
            </div>
            <div class="tab_right"></div>
        </li>
    </ul>

    <div id="open-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>

    <div id="closed-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>

    <div id="settled-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>
</div>

演示：小提琴