Onglets jQuery UI : Identificateur de fragment non concordant même si des onglets sont définis

Question

J'ai défini les onglets suivants dans mon document.

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

Les onglets requis sont déjà définis, mais l'exception se produit quand même. Qu'est-ce que je fais de mal ici !

Answer 1

Le problème est que les éléments cibles ne se trouvent pas à l'intérieur de l'élément tab élément bill-selection-tab .

Essayez

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

Démonstration : Violon