在网页开发中，实现点击按钮显示或隐藏文本是一个常见的交互需求。JavaScript作为网页开发的核心脚本语言，提供了简单且有效的方法来达成这一功能。

我们需要构建HTML结构。在页面中创建一个按钮元素和一个要显示或隐藏的文本元素。例如：

<button id="toggleButton">点击显示/隐藏文本</button>
<p id="hiddenText" style="display:none;">这是一段隐藏的文本，当你点击按钮时，它将显示出来，再次点击则会隐藏。</p>

这里，我们给按钮和文本分别设置了唯一的id，方便后续在JavaScript中获取它们。并且通过CSS样式 display:none 先将文本隐藏起来。

接下来就是关键的JavaScript部分。我们可以使用 document.getElementById 方法获取按钮和文本元素，然后为按钮添加点击事件监听器。示例代码如下：

const toggleButton = document.getElementById('toggleButton');
const hiddenText = document.getElementById('hiddenText');

toggleButton.addEventListener('click', function() {
    if (hiddenText.style.display === 'none') {
        hiddenText.style.display = 'block';
    } else {
        hiddenText.style.display = 'none';
    }
});

在这段代码中，我们先获取按钮和文本元素的引用。然后，使用 addEventListener 方法为按钮添加了点击事件监听器。当按钮被点击时，会检查文本的当前显示状态。如果文本的 display 样式为 none，则将其设置为 block，使其显示；反之，如果当前是显示状态，则将 display 样式重新设置为 none，实现隐藏效果。

除了上述基本方法，还可以利用 classList 属性来实现更灵活的样式切换。例如，先定义两个CSS类：

.hidden {
    display: none;
}
.visible {
    display: block;
}

然后修改JavaScript代码如下：

toggleButton.addEventListener('click', function() {
    if (hiddenText.classList.contains('hidden')) {
        hiddenText.classList.remove('hidden');
        hiddenText.classList.add('visible');
    } else {
        hiddenText.classList.remove('visible');
        hiddenText.classList.add('hidden');
    }
});

这种方式通过切换CSS类来控制文本的显示与隐藏，更便于管理和扩展样式。

通过这些简单的步骤，利用JavaScript就能轻松实现点击按钮显示隐藏文本的功能，为网页增添实用的交互效果。无论是小型项目还是大型应用，这一功能都能为用户提供更好的体验。