mixitup和bootstrap .active类冲突

I'm trying to load a mixitup filter gallery on my bootstrap template.

我正在尝试在我的bootstrap模板上加载mixitup过滤器库。

Problem is when i'm loading the gallery on the first tab-pane that already active it works fine

问题是,当我在第一个已经激活的选项卡窗格上加载库时,它可以正常工作

but when i'm trying to load it under a the second or third tab-pane it doesn't work I think there's a conflict between the bootstrap .active class?

但是当我试图在第二个或第三个选项卡窗格下加载它时它不起作用我认为bootstrap .active类之间存在冲突?

This is the main navigation menu for the tab panes

这是选项卡窗格的主导航菜单

<div class="list-group">
   <a href="#landing" role="tab" data-toggle="tab" class="list-group-item active">Home<i class="pull-xs-right fa fa-home"></i></a>
   <a href="#about" role="tab" data-toggle="tab" class="list-group-item">About me <i class="pull-xs-right fa fa-star"></i></a>
   <a href="#services" role="tab" data-toggle="tab" class="list-group-item">What I do <i class="pull-xs-right fa fa-suitcase"></i></a>
   <a href="#portfolio" role="tab" data-toggle="tab" class="list-group-item">Portfolio <i class="pull-xs-right fa fa-photo"></i></a>
   <a href="#blog" role="tab" data-toggle="tab" class="list-group-item">Blog <i class="pull-xs-right fa fa-comment"></i></a>
   <a href="#contact" role="tab" data-toggle="tab" class="list-group-item">Contact <i class="pull-xs-right fa fa-phone"></i></a>
</div>

Here's the mixitup gallery

这是mixitup画廊

<div role="tabpanel" class="tab-pane fade" id="portfolio">
  <nav class="navbar navbar-light bg-faded">
    <div class="container">
      <ul class="nav navbar-nav" id="filters">
        <li class="nav-item"><a class="filter nav-link" data-filter=".plugins, .logo, .web">All</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".plugins">App / Plugins</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".logo">Logo Design</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".web">Web Design</a>
        </li>
        <li class="nav-item">
          <div class="fb-like" data-href="https://facebook.com/ydd.ninja" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="content">

    <div id="portfoliolist">

      <div class="portfolio logo" data-cat="logo">
        <div class="portfolio-wrapper">
          <img src="assets/images/bg.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio web" data-cat="web">
        <div class="portfolio-wrapper">
          <img src="assets/images/dp2.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">Web Design</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>


      <div class="portfolio plugins" data-cat="plugins">
        <div class="portfolio-wrapper">
          <img src="assets/images/1.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">App Design</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

    </div>
    <!--//portfolio-list-->
  </div>
</div>

Code above will not work but if i make it as the active tab-pane on first load everything is fine all the portfolio navigation wont have problem and will be clickable and filter the gallery

上面的代码将无法工作,但如果我在首次加载时将其作为活动标签窗格,一切都很好所有组合导航都不会有问题,并且可以点击并过滤图库

<div role="tabpanel" class="tab-pane fade in active" id="portfolio">

Thanks in advance hope someone can help me with it.

在此先感谢希望有人可以帮助我。

3 个解决方案

#1

Found a solution!

找到了解决方案!

It was due to conflict with the bootstrap tab data-toggle that's why it wouldn't work.

这是由于与引导标签数据切换冲突,这就是为什么它不起作用。

Solution is the following code

解决方案是以下代码

$(document).ready(function() {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          var target = $(e.target).attr('href');
          if (target === '#portfolio') {
            if (!$('#portfoliolist').mixItUp('isLoaded')) {
              $('#portfoliolist').mixItUp({
                      selectors: {
                        target: '.portfolio',
                        filter: '.filter' 
                      },
                      load: {
                        filter: 'all' // show app tab on first load
                      }  

                    });   
            }
          }
        });

    });

Thanks to this dude in mixitupforum

感谢mixitupforum中的这个家伙

#2

Make sure the the filters/controls are inside the 'mixit' class container and initiate the instance using this code.

确保过滤器/控件位于'mixit'类容器内,并使用此代码启动实例。

var mixer = mixitup('.mixit', {
         controls: {
          scope: 'local'
         }
      });

#3

Simple Change, Work fine Try it:

简单的改变,工作正常尝试:

specificly tell to filter to only action in button.filter

具体告诉过滤器只能在button.filter中进行操作

selectors: {
   control: 'button.filter'
}

#1