实现步骤
1、target
链接目标打开的位置。
2、设置iframe
。
效果
点击跳转后
css部分
仅参考
<style>
* {
padding: 0;
margin: 0;
}
/* 大盒子分左右 */
.menu {
display: flex;
width: 100%;
}
/* 左边 */
.menu .list_left {
width: 200px;
min-height: 100vh;
flex-direction: column;
background-color: cadetblue;
}
/* 右边 */
.menu .centen_right {
flex: 1;
}
/* 给宽高 */
iframe {
width: 100%;
height: 100%;
}
</style>
HTML部分
<!-- 大盒子 -->
<div class="menu">
<!-- 模拟左边列表 -->
<div class="list_left">
<ul>
<!-- 超链接target可以设置目标页面打开的位置,值为iframe的name属性的值 -->
<li><a href="https://www.baidu.com/" target="centen_frame">百度</a></li>
<li><a href="https://www.taobao.com/" target="centen_frame">淘宝</a></li>
</ul>
</div>
<!-- 右边 -->
<div class="centen_right">
<!-- 这里显示内容的区域 -->
<!-- name用来a链接跳转的目标点,frameborder规定是否显示框架周围的边框。 -->
<iframe name="centen_frame" src="https://blog.csdn.net/" frameborder="0"></iframe>
</div>
</div>
总结:
1.链接正常使用,可以本页跳转,亦或者项目内不同文件跳转,外链接这些都可以。关键使用target指定在哪里跳转。
2.iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
3.iframe 最好创建宽高,否则会有横滚动条。