代码之家 › 专栏 › 技术社区 › Gurpal singh

无法使用引导选项卡

masonry bootstrap-4 css html javascript

Gurpal singh · 技术社区 · 7 年前

我已经创建了bootstrap选项卡选项,并且还应用了js。所以这个盒子会一个小一个大。在第一个选项卡上,它工作正常,但在另一个选项卡上,它不工作。

下面是我的HTML代码

 <ul class="tabs" id="myTab">
      <li class="tab-link current" data-tab="tab-1">First</li>
      <li class="tab-link" data-tab="tab-2">Second</li>
 </ul>

 <div id="tab-1" class="tab-content current">
 <div class="container">
    <div class="gridnew">
      <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
       </div>
    </div>
  </div>
 </div

 <div id="tab-2" class="tab-content current">
 <div class="container">
     <div class="gridnew">
        <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        </div>
    </div>
  </div>
 </div

下面给出了我的JS代码

<script type="text/javascript">
 $('.gridnew').masonry({
    itemSelector: '.grid-item'
  });

0 回复 | 直到 7 年前

Gurpal singh 7 年前

最后我得到了答案。

触发每次点击我的标签,我都会看到。

<script type="text/javascript">
  $('#myTab li').click(function (e) 
{
     $("[id^='tab']").hide(); 
     e.preventDefault()
     var ids=$(this).data('tab');
     $("#"+ids).show();
     $('.gridnew').masonry({
         itemSelector: '.grid-item'
    });
 })
</script>

Jokova 6 年前

打电话给“显示”。bs。没有问题的选项卡使用jQuery。无冲突()。对于砌体网格,需要调用“布局”方法。

// Create the masonry grid
var $grid = $('.gridnew').masonry({
     itemSelector: '.grid-item',
     fitWidth: true,
     gutter: 0,
     percentPosition: true
});

// Issues with bs tabs and masonry refresh  
jQuery.noConflict();

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    // Reload the already created masonry grid, each time you click the Bootstrap tab
    $grid.masonry('layout');
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前