Question

我有一个链接列表：

<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>

在它下面我有几个盒子，一般用“水果”和一个或多个特定的水果作为它的类：

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

我的目标：当我点击链接时，不的所有框都会隐藏其类属性中包含的所选水果。加载文档时，默认情况下将显示所有div框。

这是我到目前为止提出的jQuery：

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

首先，您必须阻止这些锚点的默认操作，因为它们将重定向然后，你必须得到href属性（不属性），并将其用于类名，然后它只是过滤，显示和隐藏。

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

FIDDLE

Answer 2

一种可能的方法：

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

Demo。这里有一个重要的注意事项：你必须防止链接被处理为链接 - 因此 ~~return false~~ （感谢@cookiemonster提醒我有关事件传播的信息）e.preventDefault()调用

我建议使用一些data属性来记录这种关系 - 在我的实践中，data-target通常是合适的名称。例如：

<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。在处理不支持数据集API的浏览器时，必须将this.dataset.target交换为this.getAttribute('data-target') - 不幸的是，除IE11之外的所有IE都属于此类别。

Answer 3

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

小提琴：http://jsfiddle.net/uyLeZ/

如果它没有几个类中的一个，则隐藏div

3 个答案: