js之选项卡制作实例

简介: js之选项卡制作实例

大家好,今天给大家书写选项卡实例,话不多说,直接上干货

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次感的瀑布流布局</title>
    <style>
      .tab {
        cursor: pointer;
        padding: 10px 20px;
        display: inline-block;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
      }
 
      .tab-content {
        display: none;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 0 0 5px 5px;
      }
 
      .tab-content.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <div class="tab" onclick="openTab(event, 'tab1')">Tab 1</div>
      <div class="tab" onclick="openTab(event, 'tab2')">Tab 2</div>
      <div class="tab" onclick="openTab(event, 'tab3')">Tab 3</div>
 
      <div id="tab1" class="tab-content">
        <h3>Tab 1 Content</h3>
        <p>This is the content of Tab 1.</p>
      </div>
      <div id="tab2" class="tab-content" style="display: none;">
        <h3>Tab 2 Content</h3>
        <p>This is the content of Tab 2.</p>
      </div>
      <div id="tab3" class="tab-content" style="display: none;">
        <h3>Tab 3 Content</h3>
        <p>This is the content of Tab 3.</p>
      </div>
    </div>
    <script>
      function openTab(evt, tabName) {
        // 隐藏所有选项卡内容
        var tabContents = document.getElementsByClassName("tab-content");
        for (var i = 0; i < tabContents.length; i++) {
          tabContents[i].style.display = "none";
        }
 
        // 移除所有选项卡的 active 类
        var tabs = document.getElementsByClassName("tab");
        for (var i = 0; i < tabs.length; i++) {
          tabs[i].classList.remove("active");
        }
 
        // 显示所选选项卡内容
        document.getElementById(tabName).style.display = "block";
 
        // 添加 active 类到当前选项卡
        evt.currentTarget.classList.add("active");
      }
    </script>
  </body>
</html>

目录
相关文章
|
11天前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
13天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
11天前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
5月前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
103 0
|
2月前
|
JavaScript 前端开发
JS选项卡如何制作
JS选项卡如何制作
|
4月前
|
JavaScript
JS选项卡如何制作
JS选项卡如何制作
|
3月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
30 0
|
4月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
43 0
|
4月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
41 0
|
5月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例