<html>
<head>
<style>
.main_left{
width: 150px;
height: 100%;
float:left;
background:#c0c0c0;
cursor:pointer;
}
</style>
</head>
<body >
<div class="iframe">
<div class="main_left" style="height: 100%">
<ul>
<li data-src="a.html">11</li>
<li data-src="b.html">22</li>
<li data-src="c.html">33</li>
</ul>
</div>
<div class="main_right">
<iframe frameborder="0" scrolling="yes" style="width: 80%;height: 100%;" src="a.html" id="aa"></iframe>
</div>
</div>
</body>
<script type="text/javascript">
let items = document.getElementsByTagName("li");
for(let i=0; i<items.length; i++) {
items[i].onclick = function (){
let src = items[i].getAttribute("data-src")
document.getElementById("aa").setAttribute("src", src)
}
}
</script>
</html>
完整代码如上，当前页面为index.html ，需要另外建三个测试页面a.html、b.html、c.html
大概逻辑 就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过<li>标签的顺序号进行 页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了
方法一更适用于多个网页存在切换的场景，像只有一些内容、功能、类型需要切换的时候，单独创建网页就有点笨重了。
方法二则是适用于这种场景，利用js来处理：
方法二逻辑是利用多个div区域进行轮动切换，举个例子，左侧有五个需要切换，我只需要展现其中一个，隐藏其余四个就实现效果了，代码如下，默认其余区域是隐藏的，
当我点击其他分类时，js就回去获取，点击分类的id，然后进行页面上div的隐藏和显示，js代码如下：
<script>
document.querySelectorAll('li').forEach(function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
console.log(this.id);
if(this.id=="_mtgj")
{
document.getElementById("txcl").style.display="none";
document.getElementById("mtgj").style.display="block";
}
});
});
</script>方法三
- 首先，在HTML中创建一个左侧栏目和一个右侧区域的容器。可以使用
<div>元素或者<ul>和<li>元素来创建栏目列表。 - 接下来，使用CSS样式来给容器和元素添加样式。可以使用布局方式来将左侧栏目和右侧内容区域分割开，并设置一些样式来美化界面。
- 然后，使用JavaScript来添加事件监听器，当栏目被点击时，切换对应的内容区域。
<html>
<head>
<style>
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: lightgray;
}
.content {
flex: 1;
background-color: white;
}
.menu-item {
cursor: pointer;
}
.item {
display: none;
}
.item.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li class="menu-item">栏目1</li>
<li class="menu-item">栏目2</li>
<li class="menu-item">栏目3</li>
</ul>
</div>
<div class="content">
<div class="item" id="item1">内容1</div>
<div class="item" id="item2">内容2</div>
<div class="item" id="item3">内容3</div>
</div>
<script>
const menuItems = document.querySelectorAll('.menu-item');
const items = document.querySelectorAll('.item');
menuItems.forEach(function(item, index) {
item.addEventListener('click', function() {
// 移除所有栏目的 active 类
menuItems.forEach(function(item) {
item.classList.remove('active');
});
// 移除所有内容区域的 active 类
items.forEach(function(item) {
item.classList.remove('active');
});
// 给被点击的栏目添加 active 类
item.classList.add('active');
// 显示对应的内容区域
items[index].classList.add('active');
});
});
</script>
</body>
</html>
试试看，第三种方法非常方便
