背景
有时候需要快速预览已有的富文本内容，希望本地有个环境可以根据配置查看不同的富文本。
核心方法
juery的load方法
文件结构
- index.html 用于主入口引入常用的共用js css
- common/nav.html 用于配置需要导航的html
- page1.html~ page3.html 为需要动态预览的富文本,内容以bootstrap的demo内容为例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富文本预览框架</title>
<script src="jquery-3.2.1.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="nav_div"></div>
<script type="text/javascript">
let _testDebugArray = ["page1","page2","page3"]
let _testDebugMarkArray = ["page2"] //当页面多的时候做标记使用而已
$("#nav_div").load("./common/nav.html");
</script>
<div class="body_container">
</div>
</body>
</html>
nav.html
<ul id="navUl" >
<li class="hide">隐藏</li>
<li class="show">显示</li>
</ul>
<style>
#navUl {
display: flex;
position: fixed;
padding: 0 2px;
z-index: 1000;
font-size: 20px;
flex-wrap: wrap;
list-style: none;
/* display: none; */
}
#navUl li{
border: 1px solid #000;
background-color: #fff;
padding: 1px 5px;
}
#navUl li.red{
color: red;
}
#navUl li.active{
font-weight: bold;
}
</style>
<script>
_testDebugArray.forEach( (o) => {
$('#navUl').append(`<li class="${_testDebugMarkArray.includes(o) ? 'red' : ''}">${o}</li>`)
})
$('#navUl li').click(function() {
if($(this).html() == "隐藏") {
$('#navUl li').hide()
$('#navUl li.show').show()
}
if($(this).html() == "显示") {
$('#navUl li').show()
}
let src = $(this).html()
$(this).addClass("active").siblings().removeClass("active")
$(".body_container").load(`./${src}.html`);
$("title").text(src)
window.scrollTo(0,0)
})
</script>
