HTML 条件显示纯HTML元素

在本文中，我们将介绍如何在HTML中使用条件语句来动态地显示或隐藏元素。通过条件显示，我们可以根据特定的条件在网页中展示不同的内容，从而实现更灵活的页面布局和交互。

阅读更多：HTML 教程

什么是条件显示?

条件显示是指根据特定的条件来判断是否显示或隐藏HTML元素。这种技术常用于根据用户的行为或其他条件在不同情况下展示不同的内容。它可以用于构建响应式设计、用户界面控制和数据过滤等方面。

使用HTML条件显示元素的方法

HTML本身并没有提供直接的条件显示功能，但我们可以借助其他技术和方法来实现此目的。下面是几种常用的方法：

1. 使用JavaScript

JavaScript是一种在客户端执行的脚本语言，它可以通过操作DOM（文档对象模型）来动态改变HTML元素的显示状态。我们可以使用if语句或其他逻辑判断语句来根据条件来决定是否显示某个元素。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">点击显示/隐藏内容</button>

<p id="demo" style="display:none">这是要显示/隐藏的内容。</p>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

在上面的示例中，当用户点击按钮时，myFunction函数会被触发，它会根据demo元素的当前显示状态进行切换。

2. 使用CSS类和伪类

我们还可以通过CSS类和伪类来控制元素的显示与隐藏。例如，我们可以定义一个hidden类，并将其应用到需要隐藏的元素上，通过JavaScript来切换此类的应用。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<button onclick="myFunction()">点击显示/隐藏内容</button>

<p id="demo" class="hidden">这是要显示/隐藏的内容。</p>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  x.classList.toggle("hidden");
}
</script>

</body>
</html>

在上面的示例中，当用户点击按钮时，myFunction函数会切换hidden类的应用，从而改变元素的显示状态。

3. 使用服务器端编程语言

如果我们使用的是服务器端编程语言（如PHP、Python或Java），我们可以在服务器上根据条件来生成不同的HTML代码，从而实现条件显示。以下是一个PHP的示例：

<!DOCTYPE html>
<html>
<body>

<?php
userLoggedIn = true;

if (userLoggedIn) {
  echo "<h1>欢迎回来！</h1>";
} else {
  echo "<h1>请登录。</h1>";
}
?>

</body>
</html>