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/