js手写tabs标签页

JavaScript手写tabs标签页的步骤如下：

1. 创建一个大的容器div，用来包含整个tabs标签页。在该容器内部创建一个导航栏nav和一个内容区域div。

2. 在导航栏nav中，使用无序列表ul来创建多个导航项li，每个li代表一个标签页。

3. 在内容区域div中，创建多个内容容器div，每个div代表一个标签页的内容。这些内容容器可以根据需要进行样式设置和填充内容。

4. 通过JavaScript编写事件处理函数，实现点击导航项时切换对应的内容容器显示。

5. 在事件处理函数中，可以使用active类或其他方式来标识当前选中的导航项和内容容器。

以下是一个示例的JavaScript代码：

// HTML 结构
<div id="tabsContainer">
  <nav>
    <ul>
      <li onclick="showTab(0)">Tab 1</li>
      <li onclick="showTab(1)">Tab 2</li>
      <li onclick="showTab(2)">Tab 3</li>
    </ul>
  </nav>
  <div class="tabContent">
    <div id="tab1Content">Content for Tab 1</div>
    <div id="tab2Content">Content for Tab 2</div>
    <div id="tab3Content">Content for Tab 3</div>
  </div>
</div>

// CSS 样式
<style>
  #tabsContainer nav ul {
    list-style: none;
    display: flex;
  }
  #tabsContainer nav ul li {
    padding: 10px 20px;
    cursor: pointer;
  }
  .tabContent div {
    display: none;
  }
</style>

// JavaScript 逻辑
<script>
  function showTab(index) {
    // 隐藏所有内容容器
    var tabContent = document.querySelectorAll('.tabContent div');
    tabContent.forEach(function(content) {
      content.style.display = 'none';
    });

    // 显示选中的内容容器
    var selectedContent = document.querySelector('#tab' + (index + 1) + 'Content');
    selectedContent.style.display = 'block';
  }
</script>

在这个示例中，我们通过点击导航项来切换对应的内容容器的显示和隐藏。每个内容容器都有一个唯一的id，根据点击的导航项的索引来确定要显示的内容容器。最后，我们使用CSS样式来设置导航栏和内容容器的样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [原生JavaScript写出Tabs标签页的实例代码](https://download.csdn.net/download/weixin_38633475/14801213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp自己写的Tabs标签页](https://blog.csdn.net/weixin_46398352/article/details/127483158)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]