Question

我正在使用Grid-A-Licious。当我在单个页面上工作并在该页面上调用该插件时，它工作正常，但是在我的设计中，我需要在3个选项卡中调用它，因此，需要在同一页面上调用它3次，但它不能用作预期。它与第一个选项卡完美配合，但无法在选项卡2和3上工作。

我将它与Bootstrap标签一起使用，并在标签内容中有3个标签，然后分别称为 Grid-A-Licious 三次，但它不适用于我。

如果有人正确地回答了问题，请回复，否则我会尽快将其弄清楚！

我检查过，问题是什么，Grid-A-Licious没有应用于那些隐藏在非活动标签中的元素！

Answer 1

暂时，我管理它，默认情况下将.active类添加到所有选项卡（它们设置为display：block），而就ready.function，我隐藏了第二个和第三个选项卡，这样， gridalicious将其样式应用于所有制表符元素，并且有效。

由于默认情况下隐藏了其他两个选项卡（display：none）而导致问题发生，并且，pluggin无法获取DOM元素。

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

收到来自人的邮件和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>

Jquery的

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

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

1 个答案: