Javascript 如何使用jquery在twitter bootstrap3中使用nav-nav-pills过滤投资组合网格

我想用bootstrap3中的nav nav药片过滤投资组合网格

HTML:

谁能帮我一下吗

// on click of a check the data attr and show li based on attr val  
$('#filterOptions li a').on('click', function (e) {
    e.preventDefault(); // 
    a = $(this).data('filter'); // finding the data value
    $('.grid li').fadeOut().promise().done(function () { // hiding all li
        $('.grid li.' + a).fadeIn(); // show only the class having the class == data attr
    });

    if ($(this).hasClass('all')) { // check if all is clicked 
        $('.grid li').fadeOut().promise().done(function () { // hiding all
            $('.grid li').fadeIn(); // showing all
        });
    }
});

// on document ready check if a has class active
if ($('#filterOptions li a').hasClass('active')) { // check if active class it there you 
    $('.grid li').fadeIn(); //
}

演示-

---

注意：我已经为

a

标记添加了

数据过滤器

属性，并为

a

标记添加了

活动的
类
值，该属性在jsfiddle中工作，但当我在括号编辑器中尝试相同操作时，它就不起作用了
 $(document).ready(function(){

$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');

// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');

if(ourClass == 'all') {
  // show all our items
  $('.grid cs-style-6').children('li.item').show();
}
else {
  // hide all elements that don't share ourClass
  $('.grid cs-style-6').children('li:not(.' + ourClass + ')').hide();
  // show all elements that do share ourClass
  $('.grid cs-style-6').children('li.' + ourClass).show();
   }
return false;
  });
});

// on click of a check the data attr and show li based on attr val  
$('#filterOptions li a').on('click', function (e) {
    e.preventDefault(); // 
    a = $(this).data('filter'); // finding the data value
    $('.grid li').fadeOut().promise().done(function () { // hiding all li
        $('.grid li.' + a).fadeIn(); // show only the class having the class == data attr
    });

    if ($(this).hasClass('all')) { // check if all is clicked 
        $('.grid li').fadeOut().promise().done(function () { // hiding all
            $('.grid li').fadeIn(); // showing all
        });
    }
});

// on document ready check if a has class active
if ($('#filterOptions li a').hasClass('active')) { // check if active class it there you 
    $('.grid li').fadeIn(); //
}