如何使用带有验证的 Javascript 创建导航选项卡以移动到下一个选项卡

在前端开发过程中，通常需要创建导航选项卡来允许用户浏览网站的不同部分。使用 Javascript 创建这些选项卡可以提供更好的用户体验，使页面更新更快更流畅。本文将介绍如何使用带有验证的 Javascript 创建导航选项卡以移动到下一个选项卡。

创建基本结构

首先，我们需要创建 HTML 结构来显示导航选项卡。我们可以使用 <ul> 和 <li> 元素来创建一个基本的导航选项卡。下面是 HTML 代码示例：

<ul class="tab-menu">
    <li><a href="#tab1" class="active">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="active">Content of Tab 1</div>
    <div id="tab2">Content of Tab 2</div>
    <div id="tab3">Content of Tab 3</div>
</div>

在以上代码中，我们创建了一个包含列表项和选项卡内容的基本结构。每个列表项都有一个 <a> 元素，它通过 href 属性与相应的选项卡内容进行关联。我们还添加了一个 class="active" 属性来标识第一个选项卡和对应的内容是默认激活的。

使用 Javascript 切换选项卡

接下来，我们需要编写 Javascript 代码，使用户能够切换选项卡。在我们的例子中，我们可以通过在选项卡链接上添加点击事件来实现这一点。我们可以使用 querySelectorAll() 函数选中所有选项卡链接，并使用 forEach() 函数为每个链接添加点击事件监听器。在每个点击事件内，我们需要禁止默认事件和冒泡，然后切换到下一个选项卡。

代码示例：

const tabMenus = document.querySelectorAll('.tab-menu a');
tabMenus.forEach(function (tabMenu) {
    tabMenu.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const parentList = this.parentNode.parentNode;
        const prevTab = parentList.querySelector('.active');
        const currentTab = this;
        if (prevTab !== currentTab) {
            prevTab.classList.remove('active');
            currentTab.classList.add('active');
            const currentTabContent = document.getElementById(currentTab.getAttribute('href').replace('#', ''));
            const prevTabContent = document.getElementById(prevTab.getAttribute('href').replace('#', ''));
            prevTabContent.classList.remove('active');
            currentTabContent.classList.add('active');
        }
    });
});

在以上代码中，我们首先使用 querySelectorAll() 函数选中所有选项卡链接，并在它们上面使用 forEach() 函数为每个链接添加点击事件监听器。在点击事件中，我们使用 classList 属性来添加和删除 active 类，以标识当前激活的选项卡。我们还使用 getElementById() 函数和 replace() 函数来选取选项卡内容，并将它们之间进行切换。

添加验证

最后，我们需要添加验证以确保用户选择的选项卡是可用的。我们可以使用 disabled 属性在选项卡不可用时禁用链接。在我们的例子中，我们可以在 Javascript 中添加一些逻辑，检查当前选项卡是否可用。如果不可用，我们可以禁用链接，否则保持链接可用。

代码示例：

const availableTabs = ['tab1', 'tab3'];
tabMenus.forEach(function (tabMenu) {
    tabMenu.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const parentList = this.parentNode.parentNode;
        const prevTab = parentList.querySelector('.active');
        const currentTab = this;
        const tabId = currentTab.getAttribute('href').replace('#', '');
        if (prevTab !== currentTab && availableTabs.indexOf(tabId) !== -1) {
            prevTab.classList.remove('active');
            currentTab.classList.add('active');
            const currentTabContent = document.getElementById(tabId);
            const prevTabContent = document.getElementById(prevTab.getAttribute('href').replace('#', ''));
            prevTabContent.classList.remove('active');
            currentTabContent.classList.add('active');
        } else {
            this.setAttribute('disabled', 'disabled');
        }
    });
});

在以上代码中，我们首先创建了一个数组 availableTabs，其中包含用户可以访问的选项卡的 ID。在点击事件中，我们使用 indexOf() 函数检查当前选项卡的 ID 是否在 availableTabs 数组中。如果不在数组中，我们使用 setAttribute() 函数禁用事件目标元素上的链接。

总结

在本文中，我们介绍了如何使用带有验证的 Javascript 创建导航选项卡以移动到下一个选项卡。我们首先创建了一个基本的 HTML 结构来显示选项卡和内容，然后使用 Javascript 添加了选项卡切换功能和验证逻辑。通过实现本文中的方法，我们可以为用户提供更好的浏览体验，并确保他们只能访问他们有权访问的选项卡。