JS 实现页签的方法

在网页开发中，页签是一种常见且实用的交互元素，能够有效地组织和展示大量内容，提升用户体验。使用 JavaScript（JS）可以灵活地实现各种页签效果。

首先是最基础的 HTML 结构搭建。我们需要创建包含页签标题和对应内容的容器。例如，用 <ul> 标签来存放页签标题列表，每个标题用 <li> 标签表示；用 <div> 标签来作为内容展示区域，不同内容块分别放在不同的 <div> 中，并设置唯一的标识。

接下来就是 JS 的核心代码部分。我们要先获取到所有的页签标题和内容块元素。可以使用 document.querySelectorAll() 方法来实现，例如：

const tabTitles = document.querySelectorAll('.tab-title');
const tabContents = document.querySelectorAll('.tab-content');

然后，为每个页签标题添加点击事件监听器。当用户点击某个页签标题时，我们要实现对应的内容展示，并隐藏其他内容。这可以通过循环遍历所有内容块，根据点击的标题索引来判断显示哪个内容块，示例代码如下：

tabTitles.forEach((title, index) => {
    title.addEventListener('click', () => {
        tabContents.forEach(content => {
            content.style.display = 'none';
        });
        tabContents[index].style.display = 'block';
    });
});

为了让页面加载时默认显示第一个页签内容，我们可以在页面加载完成后执行一段代码，手动触发第一个页签的点击事件：

window.addEventListener('load', () => {
    tabTitles[0].click();
});

为了增强用户体验，还可以添加一些过渡效果。比如，使用 CSS 的 transition 属性来实现内容切换的淡入淡出效果。在 CSS 中为内容块设置 opacity 属性，并定义过渡时间：

.tab-content {
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}
.tab-content.active {
    opacity: 1;
    display: block;
}

在 JS 中，当显示对应内容块时，添加或移除对应的 CSS 类来触发过渡效果：

tabTitles.forEach((title, index) => {
    title.addEventListener('click', () => {
        tabContents.forEach(content => {
            content.classList.remove('active');
        });
        tabContents[index].classList.add('active');
    });
});

通过以上步骤，我们就能利用 JS 实现一个功能完善、交互友好的页签效果，为网页增添更多的吸引力和实用性。