mixitup 和 bootstrap .active 类冲突

Question

我正在尝试在我的引导模板上加载一个 mixitup 过滤器库。

问题是当我在第一个已经处于活动状态的选项卡窗格上加载图库时，它工作正常

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

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

<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>

这是混音库

<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>

上面的代码将不起作用，但如果我在首次加载时将其设置为活动选项卡窗格，一切都很好，所有投资组合导航都不会出现问题，并且可以点击并过滤图库

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

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

Answer 1

找到了解决办法！

这是由于与引导选项卡数据切换发生冲突，这就是它不起作用的原因。

解决方法如下代码

$(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
                      }  

                    });   
            }
          }
        });

    });

感谢mixitupforum中的这个家伙

Answer 2

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

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

Answer 3

简单的改变，工作正常试试吧：

在 button.filter

中明确告诉过滤器仅操作

selectors: {
   control: 'button.filter'
}