效果图
常规写法,不完整，只是举个例子，不推荐采用，不利于维护
代码臃肿，可用性差，每个新项目都需要重新写，烦的一批
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="/static/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <script src="/static/node_modules/jquery/dist/jquery.js"></script> <script src="/static/node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="/static/node_modules/echarts/dist/echarts-en.js"></script> <script src="/static/node_modules/echarts-wordcloud/dist/echarts-wordcloud.js"></script> </head> <style> #SonLayers,.sonLayer{ display: flex; width: 100vw; height: 100vh; } .sideBar{ color: wheat; font-size: larger; display: flex; flex: 1; } .sideBar:focus,a:focus{ color: azure; border-bottom: 3px solid brown; text-decoration:none; } .showWindow{ display: flex; flex: 8; } </style> <body> <!-- 导航 --> <nav id="nav_1" class="breadcrumb" style="margin-bottom: 0px;"> </nav> <!-- 子模块 --> <div id="SonLayers"> <!-- 全唐诗分析 --> <div id="son_0" class="sonLayer" > <nav class="navbar bg-secondary sideBar" style="flex-direction: column"> <ul id="sideBar_0" class="navbar-nav sideBar" style="flex-direction: column" > <li class="nav-item "> <a class="nav-link sideBar" href="#" >Link 1</a> </li> </ul> </nav> <div id="showWindow_0" class="bg-light text-dark showWindow" > </div> </div> <!--全国疫情分析--> <div id="son_1" class="sonLayer" style="display:None;"> <nav class="navbar bg-secondary sideBar" style="flex-direction: column"> <ul id="sideBar_1" class="navbar-nav sideBar" style="flex-direction: column" > <li class="nav-item "> <a class="nav-link sideBar" href="#" >Link 1</a> </li> </ul> </nav> <div id="showWindow_1" class="bg-light text-dark showWindow" > </div> </div> <!--广告收益影响分析--> <div id="son_2" class="sonLayer" style="display:None;"> <nav class="navbar bg-secondary sideBar" style="flex-direction: column"> <ul id="sideBar_2" class="navbar-nav sideBar" style="flex-direction: column" > <li class="nav-item "> <a class="nav-link sideBar" href="#" >Link 1</a> </li> </ul> </nav> <div class="bg-light text-dark showWindow" > </div> </div> </div> </body>
高可用写法
只需要修改对应的 全局变量即可修改界面
<!DOCTYPE html> <html lang="en"> <!-- 想要求该页面只需要修改 全局变量即可 --> <script type="text/javascript"> //为主导航 添加选项 navlist=["分析统计全唐诗","全国疫情分析","广告收益影响分析","创作者 mk"] //每个一级模块的子内容 sideBarlist=[["词频分析,词云展示","春夏(暑)秋冬，柱状图显示次数","统计常用地名,无显示要求","词向量分析，word2vec"], ["获取疫情数据（全球、中国各省及各地区数据）","疫情数据分析","每日疫情变化可视化","中国疫情地图可视化","世界疫情及地级市疫情地图可视化(拓展)"], ["绘制散点图分析相关性","利用线性回归，拟合广告投入与收益之间的关系"], ["不断挑战自己","不断加强思维逻辑能力"]] </script> <head> <meta charset="UTF-8"> <title>Title</title> <link href="/static/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <script src="/static/node_modules/jquery/dist/jquery.js"></script> <script src="/static/node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="/static/node_modules/echarts/dist/echarts-en.js"></script> <script src="/static/node_modules/echarts-wordcloud/dist/echarts-wordcloud.js"></script> </head> <style> #SonLayers,.sonLayer{ display: flex; width: 100vw; height: 100vh; } .sideBar{ color: wheat; font-size: larger; display: flex; flex: 1; } .sideBar:focus,a:focus{ color: azure; border-bottom: 3px solid brown; text-decoration:none; } .showWindow{ display: flex; flex: 8; } </style> <body> <!-- 导航 动态追加代码 追加的连接id类似 a_0 1 2 导航选项id --> <nav id="nav_1" class="breadcrumb" style="margin-bottom: 0px;"> </nav> <!-- 子模块 采用动态追加代码 追加的 侧边栏id sideBar_'+i1 --> <!-- 侧边栏子id aSideBar_0-0 侧边栏对应的主显示区 showWindow_0-0 --> <div id="SonLayers"> </div> </body> <!-- 加载完成就执行 --> <script type="text/javascript"> $(function () { //为主导航 添加选项 //var navlist=["分析统计全唐诗","全国疫情分析","广告收益影响分析"] //每个一级模块的子内容 //var sideBarlist=[["词频分析,词云展示","春夏(暑)秋冬，柱状图显示次数","统计常用地名,无显示要求","词向量分析，word2vec"], // ["获取疫情数据（全球、中国各省及各地区数据）","疫情数据分析","每日疫情变化可视化","中国疫情地图可视化","世界疫情及地级市疫情地图可视化(拓展)"], // ["绘制散点图分析相关性","利用线性回归，拟合广告投入与收益之间的关系"],] for(var i1=0,i2=navlist.length;i1<i2;i1++){ var ElementStr='<a class="breadcrumb-item" id="a_'+i1+'" href="#">'+navlist[i1]+'</a>' $("#nav_1").append(ElementStr) //为模块一二三 侧边栏添加选项 var isshow='' if(i1!=0){isshow='style="display: None;"'} var ElementStr='<div id="son_'+i1+'" class="sonLayer" '+isshow+' >\n' + ' <nav class="navbar bg-secondary sideBar" style="flex-direction: column">\n' + ' <ul id="sideBar_'+i1+'" class="navbar-nav sideBar" style="flex-direction: column" >\n' for(var i01=0,i02=sideBarlist[i1].length;i01<i02;i01++){ ElementStr+=' <li class="nav-item ">\n' + ' <a id="aSideBar_'+i1+'-'+i01+' " class="nav-link sideBar" href="#" >'+sideBarlist[i1][i01]+' </a>\n' + ' </li>\n' } ElementStr+=' </ul>\n' + ' </nav>\n' for(var i01=0,i02=sideBarlist[i1].length;i01<i02;i01++){ var isshow='' if(i01!=0){isshow='style="display: None;"'} ElementStr+=' <div id="showWindow_'+i1+'-'+i01+'" class="bg-light text-dark showWindow" '+isshow+' >\n' +i1+'_'+i01+ ' </div>\n' } '</div>' $("#SonLayers").append(ElementStr) } //为主导航添加选择 $(".breadcrumb-item").click(function () { $('[id^=son]').hide() $('[id^=showWindow]').hide() var index1=this.id.split("_")[1]; $('[id^=son_'+index1+']').show() $('[id^=showWindow_'+index1+'-0]').show() }) //为 侧边栏添加 showwindows 选择 $('[id^=aSideBar]').click(function () { $('[id^=showWindow]').hide() var index1=this.id.split("_")[1]; $('[id^=showWindow_'+index1+']').show() }) }) </script> </html>
效果如下
依赖下载。并在index中添加即可
在static 上
cnpm init cnpm install jquery bootstrap echarts echarts-wordcloud
在index中导入即可
<script src="/static/node_modules/jquery/dist/jquery.js"></script> <script src="/static/node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="/static/node_modules/echarts/dist/echarts-en.js"></script> <script src="/static/node_modules/echarts-wordcloud/dist/echarts-wordcloud.js"></script>
直接下载使用即可
https://code.aliyun.com/734449600/CanBeReUseHtml/repository/archive.zip?ref=master
代码结构
核心代码 /templates/index.html
