mixitup 和 bootstrap .active class 冲突

Question

我正在尝试在我的 bootstrap 模板上加载混合滤镜库。

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

但是当我试图将它加载到第二个或第三个选项卡窗格下时它不起作用我认为 bootstrap .active class?

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

<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

找到解决方案！

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

解决方法如下代码

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

确保 filters/controls 在 'mixit' class 容器内并使用此代码启动实例。

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

Answer 3

简单的改变，效果很好试试吧：

具体告诉过滤到只在button.filter

中的动作

selectors: {
   control: 'button.filter'
}

mixitup 和 bootstrap .active class 冲突

mixitup and bootstrap .active class conflict

css

jquery

twitter-bootstrap

twitter-bootstrap-4