一、在一个页面（不跨页面）
效果：
代码
<!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标签，跨页面效果
效果
代码
首页
<!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
<!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标签实现页面顶部标签栏
效果
代码
<!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>
