jquery - 在同一页面中多次使用 Grid-A-Licious 插件

Question

我正在使用 Grid-A-Licious .当我在单个页面上工作并在该页面上调用该插件一次时它工作正常，但根据我的设计，我需要在 3 个选项卡内调用它，因此需要在同一页面上调用它 3 次，但它不能正常工作预期的。它适用于第一个选项卡，但无法适用于选项卡 2 和 3。

我将它与 Bootstrap 选项卡一起使用，并且有 3 个选项卡，在 tab-content 内，然后每次调用 Grid-A-Licious 三次，但它对我不起作用。

如果有人答对了问题，请回复，否则我会尽快解决!

我检查了一下，问题是 Grid-A-Licious 没有应用到那些隐藏在非事件选项卡中的元素!

Answer 1

目前，我通过将 .active 类添加到所有选项卡(默认设置为显示: block )来管理它，并且在 ready.function 上，我隐藏了第二个和第三个选项卡，这样， gridalicious 将其样式应用于所有选项卡元素，并且有效。

问题的发生是由于默认情况下隐藏了其他两个选项卡(显示:无)，并且插件无法获取 DOM 元素。

但是，问题仍然存在，如果我加载 hude 数据，或从数据库中获取信息，但对于短静态内容工作正常。

收到来自人们的邮件和 Facebook 消息，要求提供代码，我已将其用于我的解决方案，因此将其粘贴在这里。 (我设法做到了 - 但遇到了一些问题，后来我的元素不需要它，所以放弃了这个选项卡式功能，所以它不是 100% 准确的解决方案。)

我假设您了解 Bootstrap 类。

 <ul class="tab-menubar">
      <li class="active" ><a role="tab"data-toggle="tab" href="#tab-search">Search</a></li>
      <li><a role="tab" data-toggle="tab" href="#tab-popular">Most Popular</a></li>
      <li><a role="tab" data-toggle="tab" href="#tab-fav">Favourites</a></li>
 </ul>

<div class="tab-pane active" id="tab-search">
   <div class="gridalacious-wrapper">
      <div class="item">
         <your HTML>
       </div>
   </div>
</div>
<div class="tab-pane active" id="tab-popular"></div>
<div class="tab-pane active" id="tab-fav"></div>

查询

$(document).ready(function(){
    $('#tab-popular, #tab-fav').removeClass('active');
 });