标签未在手风琴jQuery中呈现

Question

我正在使用2个带有标签的jQuery手风琴。 它确实起作用，但是当我单击第二个手风琴将其展开时，内部的2个选项卡未渲染，但不确定为什么。 任何帮助，将不胜感激。

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

Answer 1

jQuery仅作用于您的第一个“选项卡” div。 然后，当它完成时就停止了。 您需要以不同的方式命名它们，然后分别调用.tabs() 。 HTML中的ID必须始终是唯一的。

这是一个工作的小提琴

Answer 2

经过一些搜索和测试，我发现为不同的div分配不同的ID可以解决问题。 发表与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>

标签未在手风琴jQuery中呈现

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-01-14 20:30:03

解决方案2
0 2014-01-15 01:00:50

标签未在手风琴jQuery中呈现

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-01-14 20:30:03

解决方案2 0 2014-01-15 01:00:50

解决方案1
1 已采纳 2014-01-14 20:30:03

解决方案2
0 2014-01-15 01:00:50