Getting the code to be fix for jQuery

JavaScript
1

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.

http://romabio.com/products/ <– OLD

http://romabio.com/products/index1.html <– NEW and needs to be fix!


// Set up tabs
$('.tabbable .nav a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

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

	// Set up Popovers
	$(products).popover({
		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),
			groupBy;
		
		// Toggle button on click, we disabled that automatic toggle
		// because we want to do more than just change the button on click
		$this.button('toggle');

		getClassesFromActiveButtons();

		// Disabled all products
		products.addClass('disabled');

		// 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) {
				$p.removeClass('disabled');
			}
		});
	})

	function disableAllProducts() {
		products.addClass('disabled');
	}

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

		console.log(filterOn);
	}
2

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 a.active {
    background-color: #FF00FF; /* fuschia */
}
3

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.

4

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?