如果div没有多个类别之一，则将其隐藏

Question

I have a list of links:

<ul>
   <li><a class="selection" href="appels">Appels</a></li>
   <li><a class="selection" href="bananas">Bananas</a></li>
   <li><a class="selection" href="pineapples">Pineapples</a></li>
</ul>

Beneath it I have several boxes with the general term "fruits" and one or more specific fruits as its classes:

<div class="fruits bananas apples pineapples"></div>  
<div class="fruits bananas"></div>
<div class="fruits pineapples apples"></div>

My goal: When I click on a link, then all the boxes which do not have the selected fruit contained in their class-attribute shall hide. When the document loads, by default all div-boxes will be displayed.

Here is the jQuery I have come up with so far:

jQuery(document).ready(function() {

    var element_just_clicked;
    var href_of_element;

    jQuery('.selection').click(function() { 

                event.preventDefault();                             
                element_just_clicked = jQuery(this);                    
                href_of_element = element_just_clicked.attr('href');


                // ... and now???
    });

Answer 1

Firstly, you have to prevent the default action of those anchors, as they will redirect.
Then, you have to get the href attribute ( not the property), and use that for the classname, and then it's just filtering and showing and hiding.

jQuery(function($) {
    $('.selection').on('click', function(e) {
        e.preventDefault();
        var elems = $('.' + this.getAttribute('href')).show();
        $('.fruits').not(elems).hide();
    });
});

FIDDLE

Answer 2

One possible approach:

$('.selection').click(function(e) {
  $('.fruits').show().not('.' + this.getAttribute('href')).hide();
  e.preventDefault();
})

Demo . One important note here: you have to prevent links to be processed as, well, links - hence return false (kudos to @cookiemonster for reminding me about event propagation) e.preventDefault() call.

I'd suggest using some data attribute to record this relationship - in my practice, data-target is often the suitable name. For example:

<ul>
   <li><a href="javascript:void(0);" data-target="apples">Appels</a></li>
   <li><a href="javascript:void(0);" data-target="bananas">Bananas</a></li>
   <li><a href="javascript:void(0);" data-target="pineapples">Pineapples</a></li>
</ul>

JS:

$('a[data-target]').click(function() {
  $('.fruits').show().not('.' + this.dataset.target).hide();
});

Demo . One has to swap this.dataset.target for this.getAttribute('data-target') when dealing with browsers that don't support Dataset API - unfortunately, all IE but IE11 fall into this category.

Answer 3

$(".selection").click(function() { 
    var href = $(this).attr("href");
    $("div.fruits").hide().filter("." + href).show();
    return false;
});

fiddle: http://jsfiddle.net/uyLeZ/