我想在bootstrap中更改数据过滤器默认选项卡

时间:2016-02-25 08:23:33

标签: android twitter-bootstrap

我正在尝试将我的默认选项卡设置为面板,只能看到面板图片,但不幸的是得到这个。 当我将ACTIVE类应用于其他选项卡时,它显示默认活动,但所有图片不仅仅是特定的选项卡图片。我尝试了很多,但没有运气希望这对你来说只是一个小问题。

 <ul class="portfolio-filter">

                    <li><a class="active" href="#" data-filter=".panels">Panels</a></li>
                    <li><a href="#" data-filter=".electric">Electricals Measuring Instruments</a></li>
                    <li><a href="#" data-filter=".power">Engineering / Power tools</a></li>
                    <li><a href="#" data-filter=".saftey">Safety equipments / Welding Materials</a></li>
                     <li><a  href="#" data-filter="*">All Products</a></li>

                </ul><!--/#portfolio-filter-->


<script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/mousescroll.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.inview.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/main.js"></script>
    <script src="form/vendor.js" ></script>

1 个答案:

答案 0 :(得分:0)

i placed this below my page just before body end tag and its solved

$(函数(){

  var $container = $('#container');


  $container.isotope({
    itemSelector: '.portfolio-item',
    masonry : { columnWidth: 70 },
    filter: '.panels'
  });


  var PageLoadFilter = '.panels';
  $container.isotope({ filter: PageLoadFilter});

  $('#portfolio button').click(function(){
    $container.isotope({
      filter: this.getAttribute('data-filter')
    });
  });

});