Getting the code to be fix for jQuery

I’m almost finish with the sorting list with using Data-id. I have almost everything working right. Just some styling to do in html/css3. I just don’t know which tag or css class I need to change to show that it has been deselected on my page. I believe the jQuery is working right. Just need the color change so that it shows the user which is select and which is not. <– OLD <– NEW and needs to be fix!

// Set up tabs
$('.tabbable .nav a').click(function (e) {

var $filter = $('#products-filter'),
	products = $('.tab-content').find('a'),
	buttons = $filter.find('button'),
	filters =, function(el) {
		return $(el).data('filter');
	filterOn = [];

	// Set up Popovers
		trigger: "hover",
		container: "#products",
		html: true,
		content: function() {
			// content is hidden div.description inside the li of the link
			return $(this).closest('li').find('.description').html();
		title: function() {
			// title is link text
			return $(this).text();

	// run this when user clicks on a filter button
	$filter.on('click', 'button', function() {
		var $this = $(this),
		// Toggle button on click, we disabled that automatic toggle
		// because we want to do more than just change the button on click


		// Disabled all products

		// Cycle through products and enable ones the match the filter buttons
		_.forEach(products, function(product) {
			var $p = $(product),
				isActive = true;

			// assume product should be active, check the product and see if has 
			// ALL of the classes for the selected filters			
			_.forEach(filterOn, function(filter) {
				console.log('checking ' + $p.text() + ' for ' + filter)
				// if it's already false, you don't have to check, that's why we check to make
				// sure it's active to begin with
				if (isActive && !$p.hasClass(filter)) {
					isActive = false;		

			// enable link if it's active
			if (isActive) {

	function disableAllProducts() {

	function getClassesFromActiveButtons() {
		filterOn = _.filter(buttons, function(button) {
			var $button = $(button);

			if ($(button).is('.active')) {
				return $(button).data('filter');	
		}).map(function(button) {
			var $button = $(button);
			return $(button).data('filter');	


The list item and the anchor link both have a class called “active” when they are … uhm, active.

So, it should just need the addition of some CSS style to affect the coloring of things.

.top-tabs li {
    background-color: #FF00FF; /* fuschia */

paul_wilkins. I was not talking about the tabs aka easytab.js. That works fine. I’m was referring to when you click on the button, the class product-List in LI would change color or make it in to a deadlink so that it can’t select.

What button? Are you meaning those tick-boxes above the tabs section?

For example BioCalce Classico?

would change color or make it in to a deadlink so that it can’t select.

Is there a problem that’s resulting in a deadlink somewhere?
Or - is it that you are wanting to learn how to filter the product-list based on criteria from the category buttons?