一个左侧栏,点击左侧菜单栏,在上方生成多标签页,点击上方标签页切换页面,类似浏览器的标签页,通过上方的标签页灵活切换多个网页, iframe嵌套的完整html示例,保证可以运行的html代码
时间: 2023-09-30 17:09:41 浏览: 85
以下是一个简单的示例,包含左侧栏、多标签页和iframe嵌套:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多标签页示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200px;
background-color: #eee;
padding: 10px;
box-sizing: border-box;
}
#tabs {
display: flex;
align-items: center;
height: 50px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.tab {
padding: 10px 20px;
cursor: pointer;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #eee;
margin-right: 5px;
}
.tab.active {
background-color: #fff;
}
iframe {
border: none;
height: calc(100vh - 50px);
width: 100%;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li class="nav-link" data-url="https://www.google.com">Google</li>
<li class="nav-link" data-url="https://www.facebook.com">Facebook</li>
<li class="nav-link" data-url="https://www.twitter.com">Twitter</li>
</ul>
</div>
<div id="tabs"></div>
<div id="content"></div>
<script>
const sidebar = document.querySelector('#sidebar');
const tabs = document.querySelector('#tabs');
const content = document.querySelector('#content');
const navLinks = document.querySelectorAll('.nav-link');
let activeTab = null;
navLinks.forEach(link => {
link.addEventListener('click', () => {
const url = link.getAttribute('data-url');
const title = link.textContent;
const tab = createTab(title);
loadPage(url, tab.content);
setActiveTab(tab);
});
});
function createTab(title) {
const tab = document.createElement('div');
tab.classList.add('tab');
tab.textContent = title;
tabs.insertBefore(tab, tabs.firstChild);
const contentPane = document.createElement('div');
contentPane.classList.add('content-pane');
content.appendChild(contentPane);
tab.addEventListener('click', () => {
setActiveTab(tab);
});
return {
tab,
content: contentPane
};
}
function setActiveTab(tab) {
if (activeTab) {
activeTab.tab.classList.remove('active');
activeTab.content.style.display = 'none';
}
activeTab = tab;
activeTab.tab.classList.add('active');
activeTab.content.style.display = 'block';
}
function loadPage(url, container) {
const iframe = document.createElement('iframe');
iframe.src = url;
container.appendChild(iframe);
}
</script>
</body>
</html>
```
这个示例中,左侧栏中有三个导航链接,每个链接都对应一个页面。点击链接时,会在上方生成一个标签页,并加载对应页面的内容到标签页中的iframe中。可以通过标签页切换不同的页面,也可以关闭标签页。
阅读全文