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必须始终是唯一的。

Here是一个工作小提琴

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 个答案: