纯html文件实现目录和文档关联

目录结构

请添加图片描述
效果图

请添加图片描述
代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>项目结题报告</title><style lang="scss">::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scrollbar-track {background: #f1f1f1;}::-webkit-scrollbar-thumb {background: #d4d4d4;border-radius: 5px;}::-webkit-scrollbar-thumb:hover {background: #adadad;}html,body {margin: 0;padding: 0;height: 100%;}.common-layout {width: 100%;height: 100%;/* overflow: hidden; */.header {height: 70px;background-color: #083a55;color: #fff;box-shadow: 0px 0px 10px 2px #0000003d;z-index: 1;padding: 0 20px;display: flex;align-items: center;justify-content: space-between;.title {font-weight: bold;font-size: 28px;}.header-content {.common- {height: 70%;font-size: 18px;border-right: 1px solid rgb(70, 70, 70);margin-left: 20px;padding-right: 20px;cursor: pointer;.current {outline: none;font-size: 16px;}.iconfont {padding-right: 10px;color: #ffffff;}&:last-child {border: 0;}}}}.el-container {height: calc(100% - 70px);background-color: #f9f6ee;display: flex;.aside {margin: 10px 10px;width: 350px;position: relative;isolation: isolate;background-color: #ffffff;box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);.nav {height: 100%;padding: 25px 20px;box-sizing: border-box;font-size: 15px;text-align: left;p {margin-top: 0;font-size: 18px;font-weight: bold;}.list_item {margin: 0 0 0 25px;a {padding: 4px 0;display: inline-block;text-decoration: none;font-size: 15px;color: #5d5d5d;&:hover {color: #409eff;}}}.nav_item {padding: 5px 0;&:hover {cursor: pointer;color: rgb(0, 140, 255);}.active {color: #008cff}}.active {color: #008cff !important;}}}.main {margin: 10px 10px 10px 0;width: calc(100% - 370px);height: calc(100% - 20px);background-color: #ffffff;box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);text-align: left;padding: 0;.ref_container {height: 100%;overflow-y: auto;}.content_cover {width: 100%;height: calc(100vh - 90px);display: flex;margin-bottom: 100px;box-shadow: 0px 3px 10px 5px #ededed70;padding: 0 0 0 20px;box-sizing: border-box;.before {width: 55%;display: flex;flex-direction: column;.logo {height: 35%;img {height: 70%;padding-top: 20px;}}.title {height: 63%;h1 {color: #616161;font-weight: 600;}h4 {margin: 10px 20px;color: #4e4e4e;font-weight: 500;}}.footer {height: 8%;p {margin: 5px 20px;font-size: 16px;}}}.behind {width: 45%;height: 100%;overflow: hidden;img {height: 100%;}}}.content {padding: 0 20px;}.content_first {text-align: left;.cont {font-size: 15px;}.tips {margin: 15px 0;color: cadetblue;}.tip {margin: 0 0 0 10px;font-size: 14px;&:first-child {margin: 0;}}h6 {margin: 10px;text-align: center;}.echarts {display: flex;justify-content: space-between;margin: 40px 5px 0;box-shadow: 0px 0px 15px 2px #e0e0e057;.echart {width: calc(100% - 150px);}.echart2 {display: flex;@media screen and (min-width: 1851px) {iframe {width: 45%;max-width: 700px;}}@media screen and (max-width: 1850px) {flex-direction: column;iframe {width: 100%;max-width: 700px;}}}.echarts_nav {width: 300px;margin-left: 5px;padding: 15px;font-size: 16px;box-sizing: border-box;border-right: 1px solid #e1e1e1;.echarts_nav_item {margin: 10px 0;cursor: pointer;&:hover {color: #008cff}}.item_active {color: #008cff}}}:deep .my-table-header {background-color: #647687;color: white;}}.table7 {height: 420px;overflow-y: auto;}.table_container {height: 420px;overflow-y: auto;}table {width: 100%;border-collapse: collapse;thead {position: sticky;top: 0;background: #647687;z-index: 100;color: white;font-size: 14px;z-index: 100;th {padding: 8px 12px;border-right: 2px solid #ebeef5;&:last-child {border: 0;}}}tbody {border: 1px solid #ebeef5}tr {border-bottom: 1px solid #ebeef5;&:nth-of-type(even) {background-color: #fafafa;}&:hover {background-color: #cacfdd3d;}}td {font-size: 14px;padding: 8px 12px;border-right: 1px solid #ebeef5;}}}select {align-items: center;border-radius: 5px;box-sizing: border-box;cursor: pointer;display: flex;font-size: 14px;gap: 6px;line-height: 24px;min-height: 32px;padding: 4px 12px;position: relative;text-align: left;outline: none;}}}.print {display: none;}@media print {.print {display: contents;}@page {margin: 20px 10px;}body {overflow: visible;}.table_container {height: auto !important;overflow-y: auto;}.el-container {height: auto !important;}.no_print {display: none !important;}.content_cover {box-shadow: unset !important;margin-bottom: 0 !important;height: calc(100vh - 20px) !important;}.main {width: 100% !important;height: 100% !important;box-shadow: unset !important;}.echart2 {display: flex;flex-direction: column !important;iframe {width: 100% !important;}}.ref_container {overflow-y: unset !important;}table {border-collapse: collapse;border: 2px solid #ebeef5;tr {page-break-inside: avoid;break-inside: avoid;border-top: 2px solid #ebeef5;border-bottom: 2px solid #ebeef5;}th {color: #363636 !important;border-right: 0 !important;}}.table_7 {/* page-break-before: always; */}.table7 {th,td {font-size: 12px !important;padding: 8px 9px !important;}}.echarts {justify-content: center !important;box-shadow: unset !important;margin: 0 !important;.echart {width: 100% !important;min-width: 100% !important;}}}</style>
</head><body><div class="common-layout"><div class="header no_print"><div class="title">***报告</div><div class="header-content"><div class="common-"><span class="iconfont icon-human1"></span><span>客户单位：XX科学院</span></div></div></div><div class="el-container"><div class="aside no_print"><div class="nav"><p>目录</p><div id="navList"></div></div></div><div class="main"><div class="ref_container" id="content"><div><div class="content_cover"><div class="before"><div class="logo"><img src="image/1.png"></div><div class="title"><h1>项目结题报告</h1><h4>测序报告</h4><h4>客户单位：XX科学院</h4></div><div class="footer"><p>***有限公司</p><p>服务热线：***</p></div></div><div class="behind"><img src="image/2.png" alt=""></div></div><div class="content" style="page-break-after: always;"><div class="content_first" id="id1"><h3>1.项目概况</h3><img src="image/report/1.png" alt="" title=""></div><div class="content_first"><h3 id="id2">2.流程说明</h3><div class="content_second"><h4 id="id21">2.1.实验流程</h4><div><img src="image/report/2.1.png" alt=""><div id="id211"><h5>2.1.1.aa</h5><p class="cont">************</p></div><div id="id212"><h5>2.1.2.bb</h5><div class="cont">************</div></div><div id="id213"><h5>2.1.3.cc</h5><div class="cont">************************************************</div></div><div id="id214"><h5>2.1.4.dd</h5><p class="cont">************************************************************************************************</p></div><div id="id215"><h5>2.1.5.ee</h5><div class="cont">************************************************************************************************</div></div></div></div><div class="content_second" id="id22"><h4>2.2.信息分析流程</h4><p class="cont">************************************************************************************************</p><img src="image/report/2.2.png" alt=""></div></div><div class="content_first"><h3 id="id3">3.数据质控</h3><div class="content_second"><div id="id31"><h4>3.1 测序数据统计</h4><div><p class="cont">结果见表1。</p><h6 class="table_1">表1 ***</h6><div class="table_container table1"><table><thead class="thead"><tr><th>Sample</th><th>Raw reads</th><th>Raw bases</th><th>Q30(%)</th><th>GC(%)</th><th>Duplication(%)</th></tr></thead><tbody class="no_print"><tr><td>S1</td><td>2</td><td>3</td><td>3</td><td>3</td><td>3</td></tr></tbody></table></div><div class="tips"><p class="tip">注：</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p></div></div></div><h4 id="id32">3.2.质量控制</h4><div id="id321"><h5>3.2.1.质量分布</h5><div><div class="cont">************结果见图1。</div><div class="echarts"><div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;"><select name="cars" id="select1"onchange="selectChange('select1','iframe1','fig1_quality_boxplot')"></select></div><div class="echart"><iframe id="iframe1"src="public/fig1_quality_boxplot/9-16_quality_boxplot.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div><h6 class="h62">图1 </h6><div class="tips"><p class="tip">注：</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p></div></div></div><div id="id322"><h5>3.2.2.Base Content分布</h5><div><div class="cont">************</div><div class="echarts" id="echart2"><div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;"><select id="select2" name="cars"onchange="selectChange2('select2','fig2_base_content')"><option value="16-122" selected>16-122</option><option value="16-146">16-146</option><option value="16-161">16-161</option><option value="16-176">16-176</option><option value="16-182">16-182</option><option value="16-183">16-183</option><option value="16-200">16-200</option><option value="16-201">16-201</option><option value="16F">16F</option><option value="16M">16M</option></select></div><div class="echart echart2"><iframe id="iframe21"src="public/fig2_base_content/16-122_read1_base_content.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe><iframe id="iframe22"src="public/fig2_base_content/16-122_read2_base_content.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div><h6 class="h62">图2 </h6><div class="tips"><p class="tip">注：</p><p class="tip">************，</p><p class="tip">************</p><p class="tip">************</p></div></div></div><div id="id33"><h4>3.3.过滤数据统计</h4><div><div class="cont">************</div><p class="cont">1)************</p><p class="cont">2)************</p><div class="cont">************数据处理的步骤如下：</div><p class="cont">1)************</p><p class="cont">2)************</p><p class="cont">3)************</p><div class="cont">数据过滤的基本情况见表2。</div><h6 class="h61">表2 </h6><div class="table_container table2"><table><thead><tr><th>Sample</th><th>Clean reads</th><th>Clean bases</th><th>Clean reads(%)</th><th>Clean bases(%)</th></tr></thead><tbody class="no_print"><tr><td>S1</td><td>70367889</td><td>5595586</td><td>0.838</td><td>1</td></tr><tr><td>S1</td><td>70367889</td><td>5595586</td><td>0.838</td><td>1</td></tr></tbody></table></div><div class="tips"><p class="tip">注：</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************</p></div><div><div class="echarts"><div class="no_print"style="font-size: 16px;margin: 40px 0 0 20px;"><select name="cars" id="select3"onchange="selectChange('select3','iframe3','fig3_piecharts')"></select></div><div class="echart"><iframe id="iframe3" src="public/fig3_piecharts/9-3_pie.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div></div><h6 class="h62">图3 数据过滤统计</h6></div></div></div></div></div></div></div></div></div></div><script></script>
</body><script>let navList = [{'id': 'id1','title': '1. 项目概况'},{'id': 'id2','title': '2. 流程说明','children': [{'id': 'id21','title': '2.1 实验流程','children': [{'id': 'id211','title': '2.1.1 aa'},{'id': 'id212','title': '2.1.2 bb'},{'id': 'id213','title': '2.1.3 cc'},{'id': 'id214','title': '2.1.4 dd'},{'id': 'id215','title': '2.1.5 ee'}]},{'id': 'id22','title': '2.2 信息分析流程'}]},{'id': 'id3','title': '3. 数据质控','children': [{'id': 'id31','title': '3.1 测序数据统计'},{'id': 'id32','title': '3.2 质量控制','children': [{'id': 'id321','title': '3.2.1 质量分布'},{'id': 'id322','title': '3.2.2 Base Content分布'}]},{'id': 'id33','title': '3.3 过滤数据统计'}]}]//生成目录const titles = []function nav(list, id) {let divElement = document.getElementById(id);list.forEach((item, index) => {let div = document.createElement('div');let a = document.createElement('a');a.textContent = item.title;a.href = '#' + item.id;a.className = 'box';div.id = item.id + '_';div.className = 'list_item';divElement.appendChild(div);div.appendChild(a)titles.push(item)if (item.children) {nav(item.children, div.id)}});}//下拉选择改变后 iframe中的图改变function selectChange(id, iframeId, url) {let selectedValue = document.getElementById(id).valuedocument.getElementById(iframeId).src = 'public/' + url + '/' + selectedValue + '.html';}function selectChange2(id, url) {let selectedValue = document.getElementById(id).valuedocument.getElementById('iframe21').src = 'public/' + url + '/' + selectedValue + '_read1_base_content.html';document.getElementById('iframe22').src = 'public/' + url + '/' + selectedValue + '_read2_base_content.html';}//给每个下拉选择赋值function ceratdOption() {let options = [{ value: '9-3', text: '9-3' },{ value: '9-5', text: '9-5' },{ value: '9-6', text: '9-6' },{ value: '9-16', text: '9-16' },{ value: '9-20', text: '9-20' },{ value: '9-21', text: '9-21' },{ value: '9-26', text: '9-26' },{ value: '9-51', text: '9-51' },{ value: '9-55', text: '9-55' },{ value: '9-56', text: '9-56' }]options.forEach(function (option, index) {document.getElementById('select1').add(new Option(option.text + '_quality_boxplot', option.value + '_quality_boxplot'))document.getElementById('select3').add(new Option(option.text + '_pie', option.value + '_pie'))document.getElementById('select4').add(new Option(option.text + '_coverage', option.value + '_coverage'))document.getElementById('select5').add(new Option(option.text + '_snp_anno_pie', option.value + '_snp_anno_pie'))document.getElementById('select6').add(new Option(option.text + '_indel_anno_pie', option.value + '_indel_anno_pie'))});}//点击菜单高亮const menu = document.getElementById('navList')menu.addEventListener('click', (e) => {highlight(e.target)})// 设置当前菜单高亮function highlight(id) {document.querySelectorAll('.box').forEach(a =>a.classList.remove('active'));// 如果传递的是一个元素if (id instanceof HTMLElement) {id.classList.add('active')return}if (id.startsWith('#')) {id = id.substring(1)}document.querySelector(`a[href="#${id}"]`).classList.add('active')}// 锚点滚动 菜单高亮const handScroll = () => {for (let i = 0; i < titles.length; i++) {// 获取锚点对应内容元素的位置const rect = document.getElementById(titles[i].id).getBoundingClientRect()// rect.top 当前元素距离页面顶部的距离 rect.bottom 当前元素底部距离页面顶部的距离if ((rect.top >= 70 && rect.top < 100) || (rect.bottom > 90 && rect.bottom < 120)) {highlight(`#${titles[i].id}`)break;}}}const contentele = document.getElementById('content')contentele.addEventListener('scroll', handScroll)window.onload = function () {nav(navList, 'navList'); // 页面加载完成后调用函数console.log('onload', titles)ceratdOption()}</script></html>