行业知识
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
2026-11-01 13:55:48
来源：互联网转载
一、在一个页面（不跨页面）
效果：
代码
/* 设置标签页外层容器样式 */ .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的内容。
function openTab(event, tabName) { // 获取所有标签页内容元素 var tabContent = document.getElementsByClassName("tab-content"); // 隐藏所有标签页内容 for (var i = 0; i 二、Tab标签，跨页面效果
效果
代码
首页
.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; } // 示例超链接列表数据 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('p'); 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 = ''; }, 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); }); page1.html
页面1 页面1
三、 Tab标签实现页面顶部标签栏
效果
代码
/* 左侧超链接列表 */ .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 var tabsContainer = document.getElementById('tabsContainer'); var contentContainer = document.getElementById('content'); var activeTab = null; // 加载内容到右侧窗口 function loadContent(url, tabName) { contentContainer.innerHTML = '加载中...'; // 模拟异步加载页面内容 setTimeout(function() { // 使用 iframe 展示页面内容 contentContainer.innerHTML = ''; // 创建标签并将其激活 createTabAndSetActive(url, tabName); }, 500); } // 创建标签并将其激活 function createTabAndSetActive(url, tabName) { // 如果标签已存在，则激活该标签 var tab = tabsContainer.querySelector('[data-url="' + url + '"]'); if (tab) { setActiveTab(tab); return; } // 创建新的标签 tab = document.createElement('p'); 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); } 四、更新三、Tab标签实现页面顶部标签栏（超过数量自动删除首项）
效果
解决切换页面时，页面中的内容会进行刷新的问题(实现切换页面，数据不会进行更新的问题)
增加关闭当前页，页面会自动锁定到打开标签页的最后一个页面
增加规定打开标签栏的总数，超过总数，关闭最早打开的页面
代码
/* 左侧超链接列表 */ .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 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('p'); 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('p'); 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'; } } 五、更新三、Tab标签实现页面顶部标签栏（超过数量，进行提示，但需要自己删除）
链接
前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）_雯0609~的博客-CSDN博客前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）https://blog.csdn.net/weixin_46001736/article/details/132559742?spm=1001.2014.3001.5501
效果
超过页面限制总数，进行提示，不对超出的页面进行展示
增加标签导航栏的横向滚动（超出部分进行隐藏）
增加全部删除标签页（悬停在标签导航栏最右侧出现删除按钮）
代码
/* 左侧超链接列表 */ .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 var tabsContainer = document.getElementById('tabsContainer'); var contentContainer = document.getElementById('content'); var activeTab = null; // 加载内容到右侧窗口 function loadContent(url, tabName) { var existingTab = tabsContainer.querySelector('[data-url="' + url + '"]'); if (existingTab) { setActiveTab(existingTab); return; } // 检查标签页数量是否已达上限 var tabs = Array.from(tabsContainer.getElementsByClassName('tab')); if (tabs.length >= 7) { alert('已达到标签页数量上限'); return; } // 隐藏当前页面内容 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('p'); 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; } // 创建新的标签 tab = document.createElement('p'); 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'); // 隐藏标签页对应的内容 var tabUrl = t.getAttribute('data-url'); var tabContent = document.getElementById(tabUrl); if (tabContent) { tabContent.style.display = 'none'; } }); 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) { 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'; } } // 关闭全部未激活标签页 function all_close() { var confirmation = confirm('是否关闭全部标签页？'); // 显示确认和取消提示框 if (confirmation) { var tabs = Array.from(tabsContainer.getElementsByClassName('tab')); tabs.forEach(function (tab) { if (!tab.classList.contains('active')) { closeTab(tab); } }); // 清空内容、活动标签页和标签导航栏 contentContainer.innerHTML = ''; activeTab = null; tabsContainer.innerHTML = ''; } else { console.log('取消') } } var isMouseDown = false; var startX = 0; var scrollLeft = 0; tabsContainer.addEventListener('mousedown', function (e) { isMouseDown = true; startX = e.pageX - tabsContainer.offsetLeft; scrollLeft = tabsContainer.scrollLeft; }); tabsContainer.addEventListener('mouseleave', function () { isMouseDown = false; }); tabsContainer.addEventListener('mouseup', function () { isMouseDown = false; }); tabsContainer.addEventListener('mousemove', function (e) { if (!isMouseDown) return; e.preventDefault(); var x = e.pageX - tabsContainer.offsetLeft; var walk = (x - startX) * 2; // 调整滚动速度 tabsContainer.scrollLeft = scrollLeft - walk; }); 修改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', '默认页面'); 代码
/* 左侧超链接列表 */ .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 var tabsContainer = document.getElementById('tabsContainer'); var contentContainer = document.getElementById('content'); var activeTab = null; // 加载内容到右侧窗口 function loadContent(url, tabName) { var existingTab = tabsContainer.querySelector('[data-url="' + url + '"]'); if (existingTab) { setActiveTab(existingTab); return; } // 检查标签页数量是否已达上限 var tabs = Array.from(tabsContainer.getElementsByClassName('tab')); if (tabs.length >= 7) { alert('已达到标签页数量上限'); return; } // 隐藏当前页面内容 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('p'); 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); } // 如果没有活动标签页或者关闭了全部标签页，则加载默认页面 if (!activeTab || tabsContainer.getElementsByClassName('tab').length === 0) { loadContent('page1.html', '默认页面'); } function createTabAndSetActive(url, tabName) { // 如果标签已存在，则激活该标签 var tab = tabsContainer.querySelector('[data-url="' + url + '"]'); if (tab) { setActiveTab(tab); return; } // 创建新的标签 tab = document.createElement('p'); 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'; if (url === 'page1.html') { closeBtn.style.display = 'none'; } else { 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'); // 隐藏标签页对应的内容 var tabUrl = t.getAttribute('data-url'); var tabContent = document.getElementById(tabUrl); if (tabContent) { tabContent.style.display = 'none'; } }); 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) { 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 = ''; } } // 关闭全部未激活标签页 function all_close() { var confirmation = confirm('是否关闭全部标签页？'); // 显示确认和取消提示框 if (confirmation) { var tabs = Array.from(tabsContainer.getElementsByClassName('tab')); tabs.forEach(function (tab) { if (!tab.classList.contains('active')) { closeTab(tab); } }); // 清空内容、活动标签页和标签导航栏 contentContainer.innerHTML = ''; activeTab = null; tabsContainer.innerHTML = ''; // 加载默认页面 loadContent('page1.html', '默认页面'); } else { console.log('取消') } } var isMouseDown = false; var startX = 0; var scrollLeft = 0; tabsContainer.addEventListener('mousedown', function (e) { isMouseDown = true; startX = e.pageX - tabsContainer.offsetLeft; scrollLeft = tabsContainer.scrollLeft; }); tabsContainer.addEventListener('mouseleave', function () { isMouseDown = false; }); tabsContainer.addEventListener('mouseup', function () { isMouseDown = false; }); tabsContainer.addEventListener('mousemove', function (e) { if (!isMouseDown) return; e.preventDefault(); var x = e.pageX - tabsContainer.offsetLeft; var walk = (x - startX) * 2; // 调整滚动速度 tabsContainer.scrollLeft = scrollLeft - walk; }); 注：五、六是文章的最完整版本，六在五的基础上多了默认页面的展示
上一篇：魔兽专家服务器插件怎么用?
下一篇：app中表格怎么设计?
