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

效果：

代码 

    
        
    
    
        
            
            标签页1
            标签页2
            标签页3
            
            
                
标签页1内容
                
这是标签页1的内容。
            
            
                
标签页2内容
                
这是标签页2的内容。
            
            
                
标签页3内容
                
这是标签页3的内容。
            
        
        
    

 二、Tab标签，跨页面效果

效果

 代码

首页

 page1.html

    
        
        
        
        
    
    
        页面1
    

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

效果

 代码

  
    
  
  
    
      
      超链接1
      超链接2
      超链接3
    
    
    
    
  

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

效果

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

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

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

代码

  
    
  
  
    
      
      超链接1
      超链接2
      超链接3
      超链接4
      超链接5
      超链接6
    
    
    
    
  

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

链接

前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）_雯0609~的博客-CSDN博客前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）https://blog.csdn.net/weixin_46001736/article/details/132559742?spm=1001.2014.3001.5501

效果

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

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

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

​

代码

  
    
  
  
    
      
      超链接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 = '';
	}
}

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

效果

修改的核心代码

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', '默认页面');

代码

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

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