2014-01-14 2 views
1

Я использую 2 jquery-аккордеоны с вкладками внутри них. Он работает, но когда я нажимаю на второй аккордеон, чтобы развернуть его, 2 вкладки внутри не отображаются, но не уверены, почему. Любая помощь будет оценена по достоинству.Вкладки не отображаются в аккордеоне jQuery

$(document).ready(function() { 
$("button").button();  
$("#tabs").tabs();  
$("#accordion").accordion({ 
    collapsible: true 
    }); 

}); 
</script> 
</head> 
<!--- The UI Part to EDIT --> 
<body> 
    <div id="accordion"> 
    <h3>SIRF</h3> 
     <div id="tabs"> 
     <ul> 
      <!--- TABS are Seperated by "li" --> 
      <li><a href="#tab1">Info</a></li>   
      <li><a href="#tab2">Setup</a></li> 
      <!-- <li><a href="#tab3"></a></li> -->   
      <li style="float:right;"><a href="#tab0">!</a></li> 
     </ul>   
    </div>    
    <h3>TIRF</h3> 
    <div id="tabs"> 
     <ul> 
      <!--- TABS are Seperated by "li" --> 
      <li><a href="#tab3">Info</a></li>   
      <li><a href="#tab4">Setup</a></li> 
      <!-- <li><a href="#tab3"></a></li> -->   
      <li style="float:right;"><a href="#tab0">!</a></li> 
     </ul> 

    </div> 
</div> 
</body> 
+1

Вместо того, чтобы редактировать вопрос с ответом, отправьте ответ на свой вопрос, а затем вернитесь и примите его. –

+1

на самом деле, если вы можете найти свой собственный ответ в течение 20 минут, задав вопрос, есть шанс задать его, в первую очередь, немного ленив: p –

+0

@ FélixGagnon-Grenier: Согласен. Я собирался предложить удалить его, но вы никогда не знаете, кто может наткнуться на эти типы вопросов. –

ответ

1

jQuery действует только на ваших первых «вкладках» div. Затем, когда это делается, он останавливается. Вы должны называть их по-разному, и звоните .tabs() по обоим отдельно. ID в HTML всегда должны быть уникальными.

Here является рабочей скрипкой

0

После некоторых поисков и испытаний, я обнаружил, что дают различные дивы разным идентификаторы работали, чтобы решить эту проблему. Добавлено ответ примерно в то же время, что и CDspace, в котором говорится в основном то же самое.

$(document).ready(function() { 
$("button").button();  
$("#tabs_a").tabs(); 
$("#tabs_b").tabs(); 
$("#accordion").accordion({ 
     collapsible: true 
     }); 

    }); 
    </script> 
    </head> 
    <!--- The UI Part to EDIT --> 
    <body> 
     <div id="accordion"> 
     <h3>SIRF</h3> 
      <div id="tabs_a">id="tabs"> 
      <ul> 
       <!--- TABS are Seperated by "li" --> 
       <li><a href="#tab1">Info</a></li>   
       <li><a href="#tab2">Setup</a></li> 
       <!-- <li><a href="#tab3"></a></li> -->   
       <li style="float:right;"><a href="#tab0">!</a></li> 
      </ul>   
     </div>    
     <h3>TIRF</h3> 
     <div id="tabs_b">id="tabs"> 
      <ul> 
       <!--- TABS are Seperated by "li" --> 
       <li><a href="#tab3">Info</a></li>   
       <li><a href="#tab4">Setup</a></li> 
       <!-- <li><a href="#tab3"></a></li> -->   
       <li style="float:right;"><a href="#tab0">!</a></li> 
      </ul> 

     </div> 
    </div> 
    </body> 
+0

Отредактировано с учетом изменений, а не только кода – CDspace

Смежные вопросы