「仿站教程」创建简单的交互式HTML页面

来源：海外服务器时间： 2023-12-07 14:29:21

导读步骤 1: 创建HTML文件首先，打开你喜欢的文本编辑器（如Notepad、Sublime Text、Visual Studio Code等），创建一个新的HTML文件。你可以将文件保存为index.html。<!DOCTYPE&nb...

步骤 1: 创建HTML文件

首先，打开你喜欢的文本编辑器（如Notepad、Sublime Text、Visual Studio Code等），创建一个新的HTML文件。你可以将文件保存为index.html。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 初始状态隐藏所有的 <li> */
    #my2 li {
      display: none;
    }
  </style>
  <title>Toggle List Items</title>
</head>
<body>

<!-- 在<body>中添加你的内容 -->

</body>
</html>

步骤 2: 添加HTML内容

在<body>标签中添加两个<div>，一个用于包裹<ul>，另一个用于包裹<li>。每个<ul>和<li>中添加一些示例文本。

<!-- ... 在<body>中添加你的内容 ... -->

<div id="my1">
  <ul>Item 1</ul>
  <ul>Item 2</ul>
  <ul>Item 3</ul>
</div>

<div id="my2">
  <li>Content 1</li>
  <li>Content 2</li>
  <li>Content 3</li>
</div>

步骤 3: 添加JavaScript代码

在<body>结束前，添加JavaScript代码，负责处理点击事件并切换显示相应的<li>。

<!-- ... 在<body>中添加你的内容 ... -->

<script>
  // 获取所有的 <ul> 和 <li> 元素
  var ulElements = document.querySelectorAll('#my1 ul');
  var liElements = document.querySelectorAll('#my2 li');

  // 默认显示第一个 <li>
  liElements[0].style.display = 'block';

  // 给每个 <ul> 元素添加点击事件监听器
  ulElements.forEach(function(ulElement, index) {
    ulElement.addEventListener('click', function() {
      // 隐藏所有的 <li> 元素
      liElements.forEach(function(liElement) {
        liElement.style.display = 'none';
      });

      // 显示点击的 <ul> 对应的 <li>
      liElements[index].style.display = 'block';
    });
  });
</script>

步骤 4: 打开浏览器查看效果

将文件保存后，使用浏览器打开index.html文件，点击<div id="my1">下的每个<ul>元素，查看效果是否符合期望。

这就是一个简单的交互式HTML页面的创建过程。你可以根据需要进行样式和布局的调整，以满足具体的设计要求。希望这个教程能帮助你入门HTML和JavaScript交互效果的创建。