Discuz 默认 JS Tab 选项卡

在构建网站时，优化用户体验和代码效率是至关重要的。为了实现这一目标，我们可以利用现有的系统功能，尽量减少额外的JavaScript编写。以下是一个简单而有效的示例，展示如何通过少量代码实现选项卡切换功能。
### 选项卡功能实现在网页设计中，选项卡是一种常见的交互方式，可以帮助用户更直观地浏览不同内容。以下是实现选项卡功能的具体方法。
#### HTML 结构首先，我们需要定义选项和对应的容器。以下是HTML代码：


选项1
选项2
选项3

每个选项都有一个唯一的ID，并通过`onclick`事件调用`switchTab`函数。默认情况下，第一个选项会被选中并添加`on`类。
#### 容器结构接下来，我们为每个选项创建对应的容器：


内容1
内容2
内容3

这里，第一个容器默认显示，其余容器则隐藏（通过`style="display:none"`实现）。
#### JavaScript 函数最后，我们需要定义`switchTab`函数来控制选项卡的行为：


function switchTab(prefix, current, total, className) {
    for (let i = 1; i <= total; i++) {
        // 移除选项的选中状态
        document.getElementById(prefix + '_' + i).classList.remove(className);
        // 隐藏对应的容器
        document.getElementById(prefix + '_c_' + i).style.display = 'none';
    }
    // 设置当前选项为选中状态
    document.getElementById(prefix + '_' + current).classList.add(className);
    // 显示当前容器
    document.getElementById(prefix + '_c_' + current).style.display = 'block';
}

#### 参数说明 - `prefix`: 选项和容器ID的前缀名称。 - `current`: 当前选中的顺序。 - `total`: 总共有多少个选项。 - `className`: 选中状态时需要添加的CSS类名。
### SEO 友好性优化为了提高搜索引擎的抓取效率，建议将上述代码封装到独立的文件中，并确保HTML结构清晰、语义化。此外，可以通过添加适当的`aria`属性来增强可访问性。例如，在选项中添加`aria-selected`属性：


选项1
选项2

这不仅有助于屏幕阅读器用户理解页面结构，还能提升整体用户体验。
总之，通过合理使用现有的系统功能和简单的JavaScript代码，我们可以高效地实现选项卡切换效果，同时确保代码的可维护性和SEO友好性。

推荐阅读