html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

雯0609~2023-08-29 8:38

一、在一个页面（不跨页面）

效果：

代码

html 复制代码 
<!DOCTYPE html>
<html>
    <head>
        <style>
        /* 设置标签页外层容器样式 */
        .tab-container {
            width: 100%;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        /* 设置标签页选项卡的样式 */
        .tab {
            float: left;
            padding: 8px 16px;
            background-color: #ccc;
            cursor: pointer;
        }

        /* 设置选中的标签页样式 */
        .active {
            background-color: #aaa;
        }

        /* 设置标签页内容的样式 */
        .tab-content {
            display: none;
            padding: 16px;
            background-color: #fff;
        }
    </style>
    </head>
    <body>
        <div class="tab-container">
            <!-- 标签页选项卡 -->
            <div class="tab active" onclick="openTab(event,'tab1')">标签页1</div>
            <div class="tab" onclick="openTab(event,'tab2')">标签页2</div>
            <div class="tab" onclick="openTab(event,'tab3')">标签页3</div>

            <!-- 标签页内容 -->
            <div id="tab1" class="tab-content" style="display:block;">
                <h3>标签页1内容</h3>
                <p>这是标签页1的内容。</p>
            </div>
            <div id="tab2" class="tab-content">
                <h3>标签页2内容</h3>
                <p>这是标签页2的内容。</p>
            </div>
            <div id="tab3" class="tab-content">
                <h3>标签页3内容</h3>
                <p>这是标签页3的内容。</p>
            </div>
        </div>

        <script>
        function openTab(event, tabName) {
            // 获取所有标签页内容元素
            var tabContent = document.getElementsByClassName("tab-content");

            // 隐藏所有标签页内容
            for (var i = 0; i < tabContent.length; i++) {
                tabContent[i].style.display = "none";
            }

            // 移除所有标签页选项卡的 active 类
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].className = tabs[i].className.replace(" active", "");
            }

            // 显示当前选中标签页内容
            document.getElementById(tabName).style.display = "block";

            // 添加 active 类到当前选中标签页选项卡
            event.currentTarget.className += " active";
        }
    </script>
    </body>
</html>

二、Tab标签，跨页面效果

效果

代码

首页

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <style>
    .tab {
      display: inline-block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="tabs"></div>
    <div id="content"></div>

    <script>
    // 示例超链接列表数据
    var links = [
      { title: '页面一', url: 'page1.html' },
      { title: '页面二', url: 'page2.html' },
      { title: '页面三', url: 'page3.html' }
    ];
    
    var tabsContainer = document.getElementById('tabs');
    var contentContainer = document.getElementById('content');
    
    // 创建标签页和加载内容函数
    function createTabAndLoadContent(title, url) {
      var tab = document.createElement('div');
      tab.innerText = title;
      tab.className = 'tab';
      
      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url);
        setActiveTab(tab);
      });
      
      tabsContainer.appendChild(tab);
    }
    
    // 加载内容到右侧窗口
    function loadContent(url) {
      contentContainer.innerHTML = '加载中...';
      
      // 模拟异步加载页面内容
      setTimeout(function() {
        // 使用iframe展示页面内容
        contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
      }, 500);
    }
    
    // 设置活动标签页样式
    function setActiveTab(tab) {
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      tabs.forEach(function(t) {
        t.classList.remove('active');
      });
      
      tab.classList.add('active');
    }
    
    // 初始化超链接列表和标签页
    links.forEach(function(link) {
      createTabAndLoadContent(link.title, link.url);
    });
  </script>
  </body>
</html>

page1.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面1</title>
    </head>
    <body>
        页面1
    </body>
</html>

三、 Tab标签实现页面顶部标签栏

效果

代码

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <style>
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    /* 顶部标签栏 */
    #tabsContainer {
      display: flex;
      align-items: center;
    }
    
    .tab {
      display: flex;
      align-items: center;
      /* padding: 5px 15px 5px 15px; */
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
      
    }
    
    /* 标签标题 */
    .tab .title {
      /* margin-right: 5px; */
      /* width:10px; */
      /* border:1px solid black; */
      padding:5px 15px 5px 15px;
      /* width:90% */
    }
    
    /* 标签关闭按钮 */
    .tab .close-btn {
      /* width:10%; */
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding:5px 5px 5px 0;
      /* border:1px solid black; */
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    /* 右侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="links">
      <!-- 在这里添加你的超链接 -->
      <a href="#" onclick="loadContent('page1.html', '超链接1'); return false;"
        class="link">超链接1</a>
      <a href="#" onclick="loadContent('page2.html', '超链接2'); return false;"
        class="link">超链接2</a>
      <a href="#" onclick="loadContent('page3.html', '超链接3'); return false;"
        class="link">超链接3</a>
    </div>
    <div id="tabsContainer"></div>
    <div id="content"></div>

    <script>
    var tabsContainer = document.getElementById('tabsContainer');
    var contentContainer = document.getElementById('content');
    var activeTab = null;
    
    // 加载内容到右侧窗口
    function loadContent(url, tabName) {
      contentContainer.innerHTML = '加载中...';
      
      // 模拟异步加载页面内容
      setTimeout(function() {
        // 使用 iframe 展示页面内容
        contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
        
        // 创建标签并将其激活
        createTabAndSetActive(url, tabName);
      }, 500);
    }
    
    // 创建标签并将其激活
    function createTabAndSetActive(url, tabName) {
      // 如果标签已存在，则激活该标签
      var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (tab) {
        setActiveTab(tab);
        return;
      }
      
      // 创建新的标签
      tab = document.createElement('div');
      tab.className = 'tab';
      tab.setAttribute('data-url', url);
      
      var title = document.createElement('span');
      title.className = 'title';
      title.innerText = tabName;
      tab.appendChild(title);
      
      var closeBtn = document.createElement('span');
      closeBtn.innerText = 'X';
      closeBtn.className = 'close-btn';
      closeBtn.addEventListener('click', function(event) {
        event.stopPropagation();
        closeTab(tab);
      });
      tab.appendChild(closeBtn);
      
      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url, tabName);
        setActiveTab(tab);
      });
      
      tabsContainer.appendChild(tab);
      setActiveTab(tab);
    }
    
    // 设置活动标签页样式
    function setActiveTab(tab) {
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      tabs.forEach(function(t) {
        t.classList.remove('active');
      });
      
      tab.classList.add('active');
      activeTab = tab;
    }
    
    // 关闭标签页
    function closeTab(tab) {
      if (tab === activeTab) {
        contentContainer.innerHTML = '';
        activeTab = null;
      }
      
      tab.parentNode.removeChild(tab);
    }
    </script>
  </body>
</html>

四、更新三、Tab标签实现页面顶部标签栏

效果：

解决切换页面时，页面中的内容会进行刷新的问题(实现切换页面，数据不会进行更新的问题)

增加关闭当前页，页面会自动锁定到打开标签页的最后一个页面

增加规定打开标签栏的总数，超过总数，关闭最早打开的页面

代码

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <style>
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    /* 顶部标签栏 */
    #tabsContainer {
      display: flex;
      align-items: center;
    }
    
    .tab {
      display: flex;
      align-items: center;
      /* padding: 5px 15px 5px 15px; */
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
      
    }
    
    /* 标签标题 */
    .tab .title {
      padding:5px 15px 5px 15px;
    }
    
    /* 标签关闭按钮 */
    .tab .close-btn {
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding:5px 5px 5px 0;
      /* border:1px solid black; */
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    /* 右侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="links">
      <!-- 在这里添加你的超链接 -->
      <a href="#" onclick="loadContent('page1.html', '超链接1'); return false;"
        class="link">超链接1</a>
      <a href="#" onclick="loadContent('page2.html', '超链接2'); return false;"
        class="link">超链接2</a>
      <a href="#" onclick="loadContent('page3.html', '超链接3'); return false;"
        class="link">超链接3</a>
      <a href="#" onclick="loadContent('page4.html', '超链接4'); return false;"
        class="link">超链接4</a>
      <a href="#" onclick="loadContent('page5.html', '超链接5'); return false;"
        class="link">超链接5</a>
      <a href="#" onclick="loadContent('page6.html', '超链接6'); return false;"
        class="link">超链接6</a>
    </div>
    <div id="tabsContainer"></div>
    <div id="content"></div>
    <script>
    var tabsContainer = document.getElementById('tabsContainer');
    var contentContainer = document.getElementById('content');
    var activeTab = null;
    
    // 加载内容到右侧窗口
  function loadContent(url, tabName) {
    // 隐藏当前页面内容
    if (activeTab) {
        activeTab.classList.remove('active');
        var activeUrl = activeTab.getAttribute('data-url');
        var activeContent = document.getElementById(activeUrl);
        activeContent.style.display = 'none';
    }
    // 显示新页面内容
    var content = document.getElementById(url);
    if (content) {
        content.style.display = 'block';
    } else {
        content = document.createElement('div');
        content.id = url;
        content.style.display = 'block';
        contentContainer.appendChild(content);

        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.frameborder = '0';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        content.appendChild(iframe);
    }

    createTabAndSetActive(url, tabName);
  }
    
   function createTabAndSetActive(url, tabName) {
      // 如果标签已存在，则激活该标签
      var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (tab) {
        setActiveTab(tab);
        return;
      }

     // 判断当前已打开的标签数量
    var existingTabs = tabsContainer.getElementsByClassName('tab');
    if (existingTabs.length >= 5) {
        // 关闭最早打开的标签页
        var firstTab = existingTabs[0];
        closeTab(firstTab);
    }

      // 创建新的标签
      tab = document.createElement('div');
      tab.className = 'tab';
      tab.setAttribute('data-url', url);

      var title = document.createElement('span');
      title.className = 'title';
      title.innerText = tabName;
      tab.appendChild(title);

      var closeBtn = document.createElement('span');
      closeBtn.innerText = 'X';
      closeBtn.className = 'close-btn';
      closeBtn.addEventListener('click', function(event) {
        event.stopPropagation();
        closeTab(tab);
      });
      tab.appendChild(closeBtn);

      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url, tabName);
        setActiveTab(tab);
      });

      tabsContainer.appendChild(tab);
      setActiveTab(tab);
    }
    
   // 设置活动标签页样式
  function setActiveTab(tab) {
    var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
    tabs.forEach(function(t) {
        t.classList.remove('active');
    });

    tab.classList.add('active');
    activeTab = tab;

    // 显示当前标签页对应的内容
    var url = tab.getAttribute('data-url');
    var content = document.getElementById(url);
    if (content) {
        content.style.display = 'block';
    }
  }
    
    // 关闭标签页
    // function closeTab(tab) {
    //   if (tab === activeTab) {
    //     contentContainer.innerHTML = '';
    //     activeTab = null;
    //   }
      
    //   tab.parentNode.removeChild(tab);
    // }
    // 关闭标签页
  function closeTab(tab) {
    var isActiveTab = (tab === activeTab);
    var nextActiveTab = tab.previousElementSibling || tab.nextElementSibling;

    tab.parentNode.removeChild(tab);

    // 如果关闭的是活动标签页且还有其他标签页存在，则将页面锁定到下一个标签页
    if (isActiveTab && nextActiveTab) {
      setActiveTab(nextActiveTab);
      loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
    }

    // 如果关闭的是活动标签页且没有其他标签页存在，则清空内容和活动标签页
    if (isActiveTab && !nextActiveTab) {
      contentContainer.innerHTML = '';
      activeTab = null;
    }

    // 隐藏当前页面内容
    if (isActiveTab) {
      var activeUrl = tab.getAttribute('data-url');
      var activeContent = document.getElementById(activeUrl);
      activeContent.style.display = 'none';
    }
  }
    </script>
  </body>
</html>
相关推荐
秦jh_10 分钟前
【Linux】多线程（概念，控制）
linux·运维·前端
蜗牛快跑21323 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy24 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
涔溪1 小时前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与2 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
热门推荐
01玄机平台应急响应—webshell查杀02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04新版微信小程序获取用户手机号05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【软件工程】UML用例图介绍和实例说明