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

我有一个链接列表：

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

---

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

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

一种可能的方法：

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

。这里有一个重要的注意事项：您必须防止链接被处理，以及链接-因此

返回false

（感谢@CookieMonester提醒我事件传播）

e.preventDefault（）

调用

我建议使用一些

数据

属性来记录这种关系-在我的实践中，

数据目标

通常是合适的名称。例如：

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

。在处理不支持dataset API的浏览器时，必须将

this.dataset.target

替换为

this.getAttribute（'data-target'）

——不幸的是，除IE11之外的所有IE都属于这一类

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

---

小提琴：

查看

：not（）

选择器

$（“：not（.banana）”）.hide（）

我们是否应该忽略Apple在链接中拼写错误？我认为您需要属性

href

，而不是属性。属性通常给出一个完全限定的URL。@cookiemonster-Argh，是的！多谢各位。）顺便说一句，我宁愿使用data属性或

rel

来定义这些关系。我同意，除非

href

是为非支持JS的浏览器设计的。即使这样，一个单独的属性也不是一个坏主意。@raina77现在你的答案很好，谢谢，我试过了，效果很好。下一个问题：如何实现隐藏div留下的空间被删除？我每行有三个div-box，例如，如果函数只隐藏div-box#3，那么box#4不会自动向上移动到box#3所在的位置……谢谢，为了回答这个问题，我们需要看到它们的HTML结构和CSS样式——至少一些概念说明了您所拥有的内容。我想，最好用一个单独的问题来表达。）

e.preventDefault（）

是个好主意，因为它不能阻止事件冒泡+1.

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

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

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