页面加载时默认选中一个tab切换

Question

1.有如下 结构的选项卡，选项卡与页面是用循环遍历出来
2.目前的方法是多写了一个选项卡页面的div。如是第一个选项卡，则在选项卡页面中加一个active属性：

3.有没有好的方法，在页面加载时默认选中一个

 
<ul class="nav nav-tabs  bg-light" role="tablist">                            
                                        <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#Valve1"><h5>N2 Valve1</h5></a>
                                        </li>
                                        <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#Books"><h5>Air MFC2</h5></a>
                                        </li>                                    
                            </ul>
<div id="Valve1" class="container tab-pane" style="margin:2px; font-size:20px;">
..............
</div>
<div id="Books" class="container tab-pane" style="margin:2px; font-size:20px;">

</div>

Answer 1

【以下回答由 GPT 生成】

我可以解决这个问题。

**解决方法：**

你可以使用JavaScript来在页面加载时默认选中一个选项卡。下面是代码示例：

```javascript
// 首先找到所有的选项卡元素
const tabs = document.querySelectorAll('.nav-link');

// 默认选中第一个选项卡
tabs[0].classList.add('active');

// 给每个选项卡添加点击事件监听器
tabs.forEach(tab => {
    tab.addEventListener('click', function() {
        // 先移除所有选项卡的'active'类
        tabs.forEach(tab => {
            tab.classList.remove('active');
        });
        // 再给当前选中的选项卡添加'active'类
        this.classList.add('active');
    });
});

以上代码将在页面加载时自动默认选中第一个选项卡，并且也为每个选项卡添加了点击事件监听器，以便在用户点击时切换选项卡，并且保持选中状态。

希望这样可以解决你的问题。 ```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^