jQuery和CSS的隐藏元素有什么区别？

我创建了类似于滑块的东西，它有三个块，每个块有两个图片和描述。在顶部，它显示了其中有两个图片和描述的块。在底部，您可以看到其他两个块的预览，而无需说明。它看起来像这样（图片是随机的）：jQuery和CSS的隐藏元素有什么区别？

http://plnkr.co/edit/o9wTYhrTnpfgXu4aEIYW?p=preview

这工作正常，但有一件事我不明白。当您点击底部预览时，会从顶部活动图片中删除说明，并将说明添加到底部不活动的图片，并阻止更改位置。默认情况下，所有的描述的figcaptions上课.sliderblock__caption和隐藏在CSS，但那些类.sliderblock__caption - 活跃显示：

.sliderblock__caption{ 
    display: none; 
} 

.sliderblock__caption--active{ 
    display: block; 
}

用CSS它工作正常，但是当我尝试给我们的js代替，它没有。

http://plnkr.co/edit/kpnx9oGJzvz94u7rjGTM?p=preview

我放置在同一个隐藏的东西，在JS文件，但它没有隐瞒什么预期被隐藏。

var caption = ".sliderblock__caption"; 
var activecaption = ".sliderblock__caption--active"; 

$(caption).css("display", "none"); 
$(activecaption).css("display", "block");

如果您单击其中一个底部块，该块将更改位置，但描述不会。

问题是，它实际上将“活动”类添加到figcaptions，但它不起作用。当你看到在Firebug的元素，它显示在顶部figcaptions具有“积极”级，但他们的CSS是如下：

element.style{ 
    display: none; 
}

哪里此规则从何而来？我应该在哪里把这段代码放在js中以获得与css相同的效果？

来源

2015-10-09 qtxt

jquery使用css来隐藏它们，除非你使用'.destroy'或'.remove'，那么它会把它们带出dom – Pete

jQuery更改'display'属性。 jQuery源代码行：'elem.style.display = show？值[index] || “”：“无” –

当你做$myElm.hide()或$myElm.css("display", "none")你设置style属性为display:none。这是内联元素CSS。

您可以使用style属性做同样的：

<div style="display:none">

使用CSS（甚至你用你的文件在线或规则），不需要JavaScript，而jQuery的css方法需要浏览器允许执行JavaScript。

来源

2015-10-09 11:42:58

jQuery和CSS的隐藏元素有什么区别？

回答

相关问题