Javascript 使用JQuery切换div后重新加载CSS

我发现了一种非常简单的方法，可以用Tim Robert Fitzgerald的过滤器切换div的可见性，在我的网站上效果很好，但是我需要稍微扩展一下，以满足我的需要

默认情况下，我有一个删除第二个div边界的第n个子设置，但是当切换div时，这不会重新应用到第二个div。实际上它仍然应用，但这不可见，因为div被设置为显示：none

我怎样才能让第n个孩子在div被切换后重新计算呢

var$btns=$（'.btn'）。单击（函数（）{
如果（this.id=='all'）{
$（'#parent>div'）.fadeIn（450）；
}否则{
var$el=$（'..+this.id）.fadeIn（450）；
$（'#parent>div'）。而不是（$el.hide（）；
}
$btns.removeClass（'active'）；
$（this.addClass（'active'）；
})

*{
框大小：边框框；
}
身体{
填充：10px；
背景#ecf0f1；
字体系列：helvetica，无衬线；
字号：200；
}
.btn{
边界：无；
背景：线性梯度（至底部，#3498db，#2980b9）；
边界半径：3px；
字体系列：Arial；
颜色：#ffffff；
填充：5px10px 5px10px；
文字装饰：无；
保证金：5px；
}
.主动{
背景：线性梯度（至底部，#3cb0fd，#3498db）；
文字装饰：无；
}
.盒子{
背景#2980b9；
填充：10px；
高度：100px；
宽度：钙（33%-10px）；
浮动：左；
保证金：5px；
文本对齐：居中；
边界半径：3px；
颜色：#fff；
边框：4px实心#000；
}
.box:第n个孩子（2）{
边界：无；
}
.垫片{
明确：两者皆有；
高度：20px；
}

全部展示
展示
秀B
显示C
显示D
A&；B
A.
B
C
D

这不起作用，因为元素仍然存在，只是隐藏了。您可能想考虑使用一个额外的类来控制边框（或者您想要的任何其他样式），并以与添加和删除活动类相同的方式与jQuery进行交换。

< P>这是不起作用的，因为元素仍然存在，只是隐藏。您可能想考虑使用一个额外的类来控制边框（或者您想要的任何其他样式），并以与添加和删除活动类相同的方式与jQuery进行交换。

< P>您使用的CSS选择器（<代码>：第n个子（2）< /代码>）不是您所需要的，因为它是基于HTML DOM元素的。第二个元素在DOM中的位置永远不会改变，它只是被隐藏

我不相信有CSS解决方案，但有一个jQuery解决方案

我拿了你的密码笔修改了一些小东西

CSS（而不是

.box:n第n个子项（2）

）

JS

请注意，该方法是基于0的索引，因此

.eq（1）

将获得第二个元素。添加：visible将只获取屏幕上可见的内容。

您使用的CSS选择器（

：n子项（2）

）不是您需要的，因为它基于HTML DOM元素。第二个元素在DOM中的位置永远不会改变，它只是被隐藏

我不相信有CSS解决方案，但有一个jQuery解决方案

我拿了你的密码笔修改了一些小东西

CSS（而不是

.box:n第n个子项（2）

）

JS

---

请注意，该方法是基于0的索引，因此

.eq（1）

将获得第二个元素。添加：visible将只获取屏幕上可见的内容。

“CSS选择器无效”不，它有效。它只是与正确的元素不匹配。这和无效不是一回事，太棒了，谢谢你。作为奖励，我希望（例如）一类“nofilter”的所有东西都可以单独使用。通过上述方法可以实现吗？@Ordog是的，您需要使用.not（）。例如$（'.box'）.not（“.nofilter”）.doWhatever（）；“CSS选择器无效”不，它是有效的。它只是与正确的元素不匹配。这和无效不是一回事，太棒了，谢谢你。作为奖励，我希望（例如）一类“nofilter”的所有东西都可以单独使用。通过上述方法可以实现吗？@Ordog是的，您需要使用.not（）。例如$（'.box'）.not（“.nofilter”）.doWhatever（）；不幸的是，CSS无法完成。你需要加入一个JS解决方案，就像答案中的解决方案一样。不幸的是，CSS做不到。您将需要合并一个JS解决方案，如答案中的解决方案。

.box.no-border {
    border:none;
}

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');

  $('.box').removeClass('no-border'); // reinitialize
  $('.box:visible').eq(1).addClass('no-border'); // apply the class
})