JQuery UI选项卡不像它应该那样运行

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/