如何隐藏 HTML 的一部分而不删除它？答案

【问题标题】：How do I hide a section of HTML without removing it?如何隐藏 HTML 的一部分而不删除它？
【发布时间】：2016-01-23 16:57:10
【问题描述】：

我想隐藏一段 HTML，并在不删除的情况下阻止从网页本身查看它。这在 HTML 或 CSS 中是否可行，或者任何人都可以推荐一个能够做到这一点的 Javascript 库吗？需要隐藏的部分如下所示：

<p>text1<strong>text2</strong></p>

我不希望它显示在网站上，但我希望它在直接查看代码时可见。

有什么想法吗？

【问题讨论】：

标签： javascript html css hide libraries

【解决方案1】：

添加一个“隐藏”类来选择目标 HTML 并在 CSS 中使用 display: none：

HTML：

<p class="hidden">text1<strong>text2</strong></p>

CSS：

.hidden {
  display: none;
}

...或者你可以直接内联它：

<p style="display:none">text1<strong>text2</strong></p>

【讨论】：

【解决方案2】：

你可以使用 css display:none

<p style="display: none;">text1<strong>text2</strong></p>

【讨论】：

【解决方案3】：

CSS 中有一个可见性属性：http://www.w3schools.com/cssref/pr_class_visibility.asp

您可以将想要隐藏的任何元素包装在 <div> 中，并将其可见性设置为隐藏。这个属性也可以用 Javascript 动态改变。

你也可以考虑使用 jQuery，它有动画 hide() 和 show() 函数

【讨论】：

【解决方案4】：

我不确定您到底需要什么，但您可以尝试将其注释掉，例如：

 <!--<p>text1<strong>text2</strong></p>-->

或者，添加一个类/id，然后选择它并在 css 上：

.myhidden{
display: none;
}
<p class="myhidden">text1<strong>text2</strong></p>

【讨论】：

【解决方案5】：

将一个类添加到 html 的该部分并隐藏该类属性。

例子：

.hidden {
	display:none;
}

<div class="hidden">
                                <a href="product.html"><img title="Necklace" alt="Necklace" src="image/product/05-necklace-60x60.jpg"></a>
                            </div>

【讨论】：

【解决方案6】：

我还想推荐 CSS-Tricks 最近的这个视频，它概述并解释了使用 CSS 隐藏元素的许多技术：CSS-Tricks Screencast #142: Hiding Things with CSS

【讨论】：