通过 JavaScript 切换毕业点 - JavaScript

在网页中，我们经常需要在不同的视图之间进行切换，比如在一个毕业纪念册中，我们希望用户可以在不同的毕业点之间切换，查看不同的回忆。本文将介绍如何通过 JavaScript 实现这一功能。

1. HTML 结构

下面是简单的 HTML 结构，包含两个毕业点的内容和两个按钮，用于在不同的毕业点之间切换。

<div id="graduation-point-1" class="graduation-point">
    <h2>毕业点 1</h2>
    <p>毕业点 1 的具体内容。</p>
</div>

<div id="graduation-point-2" class="graduation-point" style="display: none;">
    <h2>毕业点 2</h2>
    <p>毕业点 2 的具体内容。</p>
</div>

<button id="graduation-point-1-button">毕业点 1</button>
<button id="graduation-point-2-button">毕业点 2</button>

2. 通过 JavaScript 切换毕业点

// 获取两个毕业点、两个按钮
var graduationPoint1 = document.getElementById('graduation-point-1');
var graduationPoint2 = document.getElementById('graduation-point-2');
var graduationPoint1Button = document.getElementById('graduation-point-1-button');
var graduationPoint2Button = document.getElementById('graduation-point-2-button');

// 初始状态下只显示毕业点 1
graduationPoint1.style.display = 'block';
graduationPoint2.style.display = 'none';

// 点击按钮时，切换到对应的毕业点
graduationPoint1Button.onclick = function () {
    graduationPoint1.style.display = 'block';
    graduationPoint2.style.display = 'none';
};

graduationPoint2Button.onclick = function () {
    graduationPoint1.style.display = 'none';
    graduationPoint2.style.display = 'block';
};

3. 解释代码

首先，通过 document.getElementById() 方法获取了两个毕业点和两个按钮的 DOM 元素对象，便于后续操作。

然后，我们设置了毕业点 1 的初始状态为 display: block，毕业点 2 的初始状态为 display: none，即默认只显示毕业点 1。

在按钮点击事件中，我们通过设置 graduationPoint1.style.display 和 graduationPoint2.style.display 的值，实现在两个毕业点之间切换的效果。当点击毕业点 1 的按钮时，仅显示毕业点 1，将毕业点 2 隐藏；反之亦然。

4. 总结

通过简单的 JavaScript 代码，我们可以实现在两个毕业点之间切换的效果。这样的功能可以扩展到更多的场景，比如在多个标签页之间切换，或者在不同的菜单选项之间切换等。