javascript 如何隐藏 HTML 的一部分而不删除它?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33314475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide a section of HTML without removing it?
提问by What's in a Google Search
I want to hide a section of HTML, and stop it being viewable from the webpage itself without removing it. Is this possible in HTML or CSS, or can anyone recommend a Javascript library capable of doing this? The part that needs hiding looks similar to this:
我想隐藏 HTML 的一部分,并停止从网页本身查看它而不删除它。这在 HTML 或 CSS 中是否可行,或者任何人都可以推荐一个能够做到这一点的 Javascript 库?需要隐藏的部分看起来像这样:
<p>text1<strong>text2</strong></p>
I don't want it to display on the website but I do want it viewable when looking at the code directly.
我不希望它显示在网站上,但我希望在直接查看代码时可以看到它。
Any ideas?
有任何想法吗?
回答by Chris Camaratta
Add a "hidden" class to select the target HTML and use display: none
in CSS:
添加“隐藏”类以选择目标 HTML 并display: none
在 CSS 中使用:
HTML:
HTML:
<p class="hidden">text1<strong>text2</strong></p>
CSS:
CSS:
.hidden {
display: none;
}
...or you could inline it directly:
...或者你可以直接内联它:
<p style="display:none">text1<strong>text2</strong></p>
回答by NessBird
You can use css display:none
您可以使用 css display:none
<p style="display: none;">text1<strong>text2</strong></p>
回答by Tim Sanch.
There's a visibility property in CSS: http://www.w3schools.com/cssref/pr_class_visibility.asp
CSS 中有一个可见性属性:http: //www.w3schools.com/cssref/pr_class_visibility.asp
You could wrap whatever elements you want hidden in a <div>
and set it's visibility to hidden. This property can also be changed dynamically with Javascript.
您可以将想要隐藏的任何元素包装在 a 中<div>
,并将其可见性设置为隐藏。也可以使用 Javascript 动态更改此属性。
You could also look into using jQuery, which has animated hide()
and show()
functions
您还可以考虑使用具有动画hide()
和show()
功能的jQuery
回答by zhack
I'm not sure what exactly you need, but you can try commenting it out, like:
我不确定您到底需要什么,但您可以尝试将其注释掉,例如:
<!--<p>text1<strong>text2</strong></p>-->
Or, add a class/id then select it and on css:
或者,添加一个类/ID,然后在 css 上选择它:
.myhidden{
display: none;
}
<p class="myhidden">text1<strong>text2</strong></p>
回答by KamleshNishad
Add a class to that section of html and give that class property to be hidden.
将一个类添加到 html 的该部分并隐藏该类属性。
Example :
例子 :
.hidden {
display:none;
}
<div class="hidden">
<a href="product.html"><img title="Necklace" alt="Necklace" src="image/product/05-necklace-60x60.jpg"></a>
</div>
回答by Yura
I'd also like to suggest this recent video by CSS-Tricks that overviews and explains many techniques to hide an element with CSS: CSS-Tricks Screencast #142: Hiding Things with CSS
我还想推荐 CSS-Tricks 最近的这个视频,它概述并解释了许多使用 CSS 隐藏元素的技术:CSS-Tricks Screencast #142:Hiding Things with CSS