Question

我熟悉JQuery UI标签，但似乎忽略了这里的细节。

当您按下标签按钮1或2时，它们可以正常工作，但它们不会隐藏其他标签和内容。他们只是活跃了，这不是这些的正常行为吗？

JSfiddle：http://jsfiddle.net/bluey/Tp62K/

我看不出这个问题，也许有人可以启发我。

HTML

<div id='subgroup-hotnav-panel-sec_1_subsec_12' style='border-style: dotted; border-color: green; border-width: 1px;'>
    <div id="content">
        :: subgroup-hotnav-panel-sec_1_subsec_12                                                
        <br />
        ItemsIDs: 

        <!-- TAB CONTROL BEGIN -->
        <ul id="tabRef__sec_id_1_subsec_id_12-tabs" class="nav nav-tabs" data-tabs="tabs"> 
            <li><a href="#tabRef__sec_id_1_subsec_id_12_page_1" data-toggle="tab">1</a></li>
            <li><a href="#tabRef__sec_id_1_subsec_id_12_page_2" data-toggle="tab">2</a></li>                        
        </ul>
        <!-- TAB CONTROL END -->

        <!-- TAB CONTENT BEGIN -->

        <div id="tabRef__sec_id_1_subsec_id_12_page_1_content" class="tab-content">
            tabRef__sec_id_1_subsec_id_12_page_1_content                                    
            <div class="tab-pane" id="tabRef__sec_id_1_subsec_id_12_page_1">

                <h1>1</h1>
                <p>11</p>


            </div>

        </div>  

        <div id="tabRef__sec_id_1_subsec_id_12_page_2_content" class="tab-content">
            tabRef__sec_id_1_subsec_id_12_page_2_content                                    
            <div class="tab-pane" id="tabRef__sec_id_1_subsec_id_12_page_2">

                <h1>2</h1>
                <p>22</p>


            </div>

        </div>  
    </div>  
</div>

Answer 1

我更新了代码并删除了一些不需要的属性。虽然你可以添加它们并进行测试。代码是

<div id="content">:: subgroup-hotnav-panel-sec_1_subsec_12
    <br />ItemsIDs:
    <!-- TAB CONTROL BEGIN -->
    <div id="tabs">
        <ul>
            <li><a href="#tabRef__sec_id_1_subsec_id_12_page_1">1</a>
            </li>
            <li><a href="#tabRef__sec_id_1_subsec_id_12_page_2">2</a>
            </li>
        </ul>
        <!-- TAB CONTROL END -->
        <!-- TAB CONTENT BEGIN -->
        <div id="tabRef__sec_id_1_subsec_id_12_page_1">             tabRef__sec_id_1_subsec_id_12_page_1_content
             <h1>1</h1>

            <p>11</p>
        </div>
        <div id="tabRef__sec_id_1_subsec_id_12_page_2">tabRef__sec_id_1_subsec_id_12_page_2_content
             <h1>2</h1>

            <p>22</p>
        </div>
    </div>
</div>

脚本：

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

这是工作小提琴http://jsfiddle.net/anubhavranjan/n9J9Z/

JQuery UI选项卡不能正常运行

1 个答案: