Question

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

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

但是当我试图在第二个或第三个选项卡窗格下加载它时它不起作用我认为bootstrap .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>

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

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

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

mixitup和bootstrap .active class conflict

3 个答案: