当前位置：个人在线分享 > 前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

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

作者 : admin 本文共5527个字，预计阅读时间需要14分钟 发布时间： 2024-06-10 共2人阅读

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

效果：

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

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(1)

代码 



    
        
        /* 设置标签页外层容器样式 */
        .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;
        }
    
    
    
        
            
            标签页1
            标签页2
            标签页3

            
            
                
标签页1内容

                
这是标签页1的内容。

            
            
                
标签页2内容

                
这是标签页2的内容。

            
            
                
标签页3内容

                
这是标签页3的内容。

 二、Tab标签，跨页面效果

效果

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(2)

 代码

首页



  
    
    .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;
    }

 page1.html



    
        
        
        
        页面1
    
    
        页面1

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

效果

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(3)

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(4)

 代码



  
    
    /* 左侧超链接列表 */
    .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;
    }
  
  
  
    
      
      超链接1
      超链接2
      超链接3

四、更新三、Tab标签实现页面顶部标签栏（超过数量自动删除首项）

效果

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

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

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

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(5)

代码



  
    
    /* 左侧超链接列表 */
    .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;
    }
  
  
  
    
      
      超链接1
      超链接2
      超链接3
      超链接4
      超链接5
      超链接6

五、更新三、Tab标签实现页面顶部标签栏（超过数量，进行提示，但需要自己删除）

链接

前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）_雯0609~的博客-CSDN博客前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(6)http://blog.csdn.net/weixin_46001736/article/details/132559742?spm=1001.2014.3001.5501

效果

超过页面限制总数，进行提示，不对超出的页面进行展示

增加标签导航栏的横向滚动（超出部分进行隐藏）

增加全部删除标签页（悬停在标签导航栏最右侧出现删除按钮）

​前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(7)

代码




  
    
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }

    /* 顶部标签栏 */
    #tabsContainer {
      width:98%;
      display: flex;
      align-items: center;
      overflow-x: auto; /* 添加横向滚动 */
      white-space: nowrap; /* 防止标签换行 */
    }
    #tabsContainer::-webkit-scrollbar {
      display: none; /* 隐藏Webkit浏览器的滚动条 */
    }
    /* 关闭按钮的宽度 */
    .line2{
      width:2%;
    }
    #all_close{
      cursor: pointer;
      display: none;
    }
    .tab_position:hover #all_close {
      display: block;
    }
    .tab_position {
			display: flex;
			align-items: center;/*垂直居中*/
		}
    .tab {
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
    }

    /* 标签标题 */
    .tab .title {
      padding: 5px 15px 5px 15px;
      user-select: none; /* 禁止文字复制 */
    }

    /* 标签关闭按钮 */
    .tab .close-btn {
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding: 5px 5px 5px 0;
      user-select: none; /* 禁止文字复制 */
    }

    .tab.active {
      background-color: #ccc;
    }

    /* 左侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }

    #tabs {
      padding: 10px;
    }
    /* 右侧 */
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      overflow: auto;
    }
  
  

  
    
      
      超链接1
      超链接2
      超链接3
      超链接4
      超链接5
      超链接6
      超链接7
      超链接8
      超链接9
    
    
      
      
        X

修改BUG（直接替换相应的方法即可解决问题）

问题：当关闭单页存在页面数据未清除的问题

修改方法closeTab()

// 关闭标签页
function closeTab(tab) {
	var isActiveTab = (tab === activeTab);
	var nextActiveTab = tab.previousElementSibling || tab.nextElementSibling;
	var tabUrl = tab.getAttribute('data-url');
	var tabContent = document.getElementById(tabUrl);
	tab.parentNode.removeChild(tab);
	tabContent.parentNode.removeChild(tabContent); // 移除对应的内容
	if (isActiveTab) {
		activeTab = null; // 清空活动标签页
	}
	// 如果关闭的是活动标签页且还有其他标签页存在，则将页面锁定到下一个标签页
	if (isActiveTab && nextActiveTab) {
		setActiveTab(nextActiveTab);
		loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
	}
	// 如果关闭的是活动标签页且没有其他标签页存在，则清空内容和活动标签页
	if (isActiveTab && !nextActiveTab) {
		contentContainer.innerHTML = '';
	}
}

六、补充五：增加标签栏默认页面，其默认页面无法关闭始终展示到右侧内容栏中

效果

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）插图(8)

修改的核心代码

1、增加打开页面时，加载默认页面

// 如果没有活动标签页或者关闭了全部标签页，则加载默认页面
if (!activeTab || tabsContainer.getElementsByClassName('tab').length === 0) {
    loadContent('page1.html', '默认页面');
}

2、给默认页面取消关闭按钮

if (url === 'page1.html') {
    closeBtn.style.display = 'none';
} else {
    closeBtn.addEventListener('click', function (event) {
        event.stopPropagation();
        closeTab(tab);
    });
}

 3、关闭全部页面时保持默认页面的加载

// 加载默认页面
loadContent('page1.html', '默认页面');

代码




  
    
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }

    /* 顶部标签栏 */
    #tabsContainer {
      width: 98%;
      display: flex;
      align-items: center;
      overflow-x: auto;
      /* 添加横向滚动 */
      white-space: nowrap;
      /* 防止标签换行 */
    }

    #tabsContainer::-webkit-scrollbar {
      display: none;
      /* 隐藏Webkit浏览器的滚动条 */
    }

    /* 关闭按钮的宽度 */
    .line2 {
      width: 2%;
    }

    #all_close {
      cursor: pointer;
      display: none;
    }

    .tab_position:hover #all_close {
      display: block;
    }

    .tab_position {
      display: flex;
      align-items: center;
      /*垂直居中*/
    }

    .tab {
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
    }

    /* 标签标题 */
    .tab .title {
      padding: 5px 15px 5px 15px;
      user-select: none;
      /* 禁止文字复制 */
    }

    /* 标签关闭按钮 */
    .tab .close-btn {
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding: 5px 5px 5px 0;
      user-select: none;
      /* 禁止文字复制 */
    }

    .tab.active {
      background-color: #ccc;
    }

    /* 左侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }

    #tabs {
      padding: 10px;
    }

    /* 右侧 */
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      overflow: auto;
    }
  
  

  
    
      
      超链接1
      超链接2
      超链接3
      超链接4
      超链接5
      超链接6
      超链接7
      超链接8
      超链接9
    
    
      
      
        X

注：五、六是文章的最完整版本，六在五的基础上多了默认页面的展示

本站无任何商业行为
个人在线分享 » 前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
admin

admin 钻石

分享到：

相关推荐

E-->