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

【问题标题】：jQuery UI Tabs: Mismatching fragment identifier even with tabs definedjQuery UI 选项卡：即使定义了选项卡，片段标识符也不匹配
【发布时间】：2013-08-21 07:02:54
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-ui tabs jquery-ui-tabs

【解决方案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>

演示：Fiddle

【讨论】：