效果
文章來源：http://www.zghlxwxcb.cn/news/detail-681519.html
代碼
<!DOCTYPE html>
<html>
<head>
<style>
/* 左側(cè)超鏈接列表 */
.link {
display: block;
padding: 8px;
background-color: #f2f2f2;
cursor: pointer;
}
/* 頂部標(biāo)簽欄 */
#tabsContainer {
width:98%;
display: flex;
align-items: center;
overflow-x: auto; /* 添加橫向滾動(dòng) */
white-space: nowrap; /* 防止標(biāo)簽換行 */
}
#tabsContainer::-webkit-scrollbar {
display: none; /* 隱藏Webkit瀏覽器的滾動(dòng)條 */
}
/* 關(guān)閉按鈕的寬度 */
.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;
}
/* 標(biāo)簽標(biāo)題 */
.tab .title {
padding: 5px 15px 5px 15px;
user-select: none; /* 禁止文字復(fù)制 */
}
/* 標(biāo)簽關(guān)閉按鈕 */
.tab .close-btn {
font-size: 10px;
font-weight: bold;
cursor: pointer;
padding: 5px 5px 5px 0;
user-select: none; /* 禁止文字復(fù)制 */
}
.tab.active {
background-color: #ccc;
}
/* 左側(cè)內(nèi)容 */
#links {
float: left;
width: 200px;
padding: 10px;
}
#tabs {
padding: 10px;
}
/* 右側(cè) */
#content {
border: 1px solid #ccc;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div id="links">
<!-- 在這里添加你的超鏈接 -->
<a href="#" onclick="loadContent('page1.html', '這是我的超鏈接標(biāo)題1，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接1</a>
<a href="#" onclick="loadContent('page2.html', '這是我的超鏈接標(biāo)題2，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接2</a>
<a href="#" onclick="loadContent('page3.html', '這是我的超鏈接標(biāo)題3，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接3</a>
<a href="#" onclick="loadContent('page4.html', '這是我的超鏈接標(biāo)題4，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接4</a>
<a href="#" onclick="loadContent('page5.html', '這是我的超鏈接標(biāo)題5，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接5</a>
<a href="#" onclick="loadContent('page6.html', '這是我的超鏈接標(biāo)題6，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接6</a>
<a href="#" onclick="loadContent('page7.html', '這是我的超鏈接標(biāo)題7，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接7</a>
<a href="#" onclick="loadContent('page8.html', '這是我的超鏈接標(biāo)題8，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接8</a>
<a href="#" onclick="loadContent('page9.html', '這是我的超鏈接標(biāo)題9，我要測(cè)試滾動(dòng)條');
return
false;"
class="link">超鏈接9</a>
</div>
<div class="tab_position">
<div id="tabsContainer"></div>
<div id="line2">
<div id="all_close" onclick="all_close()">X</div>
</div>
</div>
<div id="content"></div>
<script>
var tabsContainer = document.getElementById('tabsContainer');
var contentContainer = document.getElementById('content');
var activeTab = null;
// 加載內(nèi)容到右側(cè)窗口
function loadContent(url, tabName) {
var existingTab = tabsContainer.querySelector('[data-url="' + url + '"]');
if (existingTab) {
setActiveTab(existingTab);
return;
}
// 檢查標(biāo)簽頁(yè)數(shù)量是否已達(dá)上限
var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
if (tabs.length >= 7) {
alert('已達(dá)到標(biāo)簽頁(yè)數(shù)量上限');
return;
}
// 隱藏當(dāng)前頁(yè)面內(nèi)容
if (activeTab) {
activeTab.classList.remove('active');
var activeUrl = activeTab.getAttribute('data-url');
var activeContent = document.getElementById(activeUrl);
activeContent.style.display = 'none';
}
// 顯示新頁(yè)面內(nèi)容
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) {
// 如果標(biāo)簽已存在，則激活該標(biāo)簽
var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
if (tab) {
setActiveTab(tab);
return;
}
// 創(chuàng)建新的標(biāo)簽
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);
// 點(diǎn)擊標(biāo)簽頁(yè)切換內(nèi)容
tab.addEventListener('click', function () {
loadContent(url, tabName);
setActiveTab(tab);
});
tabsContainer.appendChild(tab);
setActiveTab(tab);
}
// 設(shè)置活動(dòng)標(biāo)簽頁(yè)樣式
function setActiveTab(tab) {
var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
tabs.forEach(function (t) {
t.classList.remove('active');
// 隱藏標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容
var tabUrl = t.getAttribute('data-url');
var tabContent = document.getElementById(tabUrl);
if (tabContent) {
tabContent.style.display = 'none';
}
});
tab.classList.add('active');
activeTab = tab;
// 顯示當(dāng)前標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容
var url = tab.getAttribute('data-url');
var content = document.getElementById(url);
if (content) {
content.style.display = 'block';
}
}
// 關(guān)閉標(biāo)簽頁(yè)
function closeTab(tab) {
var isActiveTab = (tab === activeTab);
var nextActiveTab = tab.previousElementSibling || tab.nextElementSibling;
tab.parentNode.removeChild(tab);
// 如果關(guān)閉的是活動(dòng)標(biāo)簽頁(yè)且還有其他標(biāo)簽頁(yè)存在，則將頁(yè)面鎖定到下一個(gè)標(biāo)簽頁(yè)
if (isActiveTab && nextActiveTab) {
setActiveTab(nextActiveTab);
loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
}
// 如果關(guān)閉的是活動(dòng)標(biāo)簽頁(yè)且沒有其他標(biāo)簽頁(yè)存在，則清空內(nèi)容和活動(dòng)標(biāo)簽頁(yè)
if (isActiveTab && !nextActiveTab) {
contentContainer.innerHTML = '';
activeTab = null;
}
// 隱藏當(dāng)前頁(yè)面內(nèi)容
if (isActiveTab) {
var activeUrl = tab.getAttribute('data-url');
var activeContent = document.getElementById(activeUrl);
activeContent.style.display = 'none';
}
}
// 關(guān)閉全部未激活標(biāo)簽頁(yè)
function all_close() {
var confirmation = confirm('是否關(guān)閉全部標(biāo)簽頁(yè)？'); // 顯示確認(rèn)和取消提示框
if (confirmation) {
var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
tabs.forEach(function (tab) {
if (!tab.classList.contains('active')) {
closeTab(tab);
}
});
// 清空內(nèi)容、活動(dòng)標(biāo)簽頁(yè)和標(biāo)簽導(dǎo)航欄
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; // 調(diào)整滾動(dòng)速度
tabsContainer.scrollLeft = scrollLeft - walk;
});
</script>
</body>
</html>
解決BUG：關(guān)閉單頁(yè)時(shí)，單頁(yè)數(shù)據(jù)未清空，導(dǎo)致再次打開單頁(yè)時(shí)出現(xiàn)內(nèi)容仍然存在的問題文章來源地址http://www.zghlxwxcb.cn/news/detail-681519.html
// 關(guān)閉標(biāo)簽頁(yè)
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); // 移除對(duì)應(yīng)的內(nèi)容
if (isActiveTab) {
activeTab = null; // 清空活動(dòng)標(biāo)簽頁(yè)
}
// 如果關(guān)閉的是活動(dòng)標(biāo)簽頁(yè)且還有其他標(biāo)簽頁(yè)存在，則將頁(yè)面鎖定到下一個(gè)標(biāo)簽頁(yè)
if (isActiveTab && nextActiveTab) {
setActiveTab(nextActiveTab);
loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
}
// 如果關(guān)閉的是活動(dòng)標(biāo)簽頁(yè)且沒有其他標(biāo)簽頁(yè)存在，則清空內(nèi)容和活動(dòng)標(biāo)簽頁(yè)
if (isActiveTab && !nextActiveTab) {
contentContainer.innerHTML = '';
}
}到了這里，關(guān)于前端：html實(shí)現(xiàn)頁(yè)面切換、頂部標(biāo)簽欄，類似于瀏覽器的頂部標(biāo)簽欄（完整版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
