简单替换菜单方案

Submitted by admin on Thu, 04/17/2025 - 14:45

简化的菜单替换方案
<script type="text/javascript" src="javascript/menu-loader.js"></script>
<script type="text/javascript" src="../../Artocarpus/javascript/menu-loader.js"></script>
 

一个简单方案，只替换菜单部分而不改变页面其他结构。

1. menu.html 文件内容

创建 /var/www/html/Artocarpus/menu.html 文件，只包含菜单内容：

html

<table width="1200px"><tr><td>
<div class="nav">
<ul>
<li><a href="index.html">Home</a> </li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Genome</a>
<ul>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArAl"><i>Artocarpus altilis</i></a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArHeCHN2"><i>Artocarpus heterophyllus</i></a>
<ul>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArHeCHN2">S10</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArHe"><i>Artocarpus heterophyllus</i></a>
<ul>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArHe">ICRAFF_11314</a></li>
</ul>
</li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArHi"><i>Artocarpus hirsutus</i></a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArNa"><i>Artocarpus nanchuanensis</i></a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=ArCa"><i>Artocarpus camansi</i></a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Expression</a>
<ul>
<li><a href="RNA-seq.htm">RNA-seq</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Tools</a>
<ul>
<li><a href="search.htm">Search</a></li>
<li><a href="batchsearch.htm">Batch Search</a></li>
<li><a href="sequenceserver_blast.htm">BLAST</a></li>
<li><a href="jbrowse.htm">JBrowse</a></li>
<li><a href="GO_enrichment.htm">GO enrichment</a></li>
<li><a href="KEGG_enrichment.htm">KEGG enrichment</a></li>
<li><a href="TPS_Family.htm">TPS Family</a></li>
<li><a href="MISAweb.htm">MISAweb</a></li>
<li><a href="primer3.htm">Primer3</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Document</a>
<ul>
<li><a href="statistics.htm">Statistics</a></li>
<li><a href="link.htm">Resources</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Community</a>
<ul>
<li><a href="manual.htm">Manual</a></li>
<li><a href="feedback.htm">Feedback</a></li>
<li><a href="download.htm">Download</a>
</ul>
</li>
</ul></div></td></tr></table>

2. menu-loader.js 文件内容

创建 /var/www/html/Artocarpus/javascript/menu-loader.js 文件：

javascript

document.addEventListener('DOMContentLoaded', function() {
// 查找所有带有class="menu"的td元素
var menuElements = document.querySelectorAll('td.menu');

if (menuElements.length > 0) {
// 获取第一个menu元素
var menuElement = menuElements[0];

// 加载menu.html文件
var xhr = new XMLHttpRequest();
xhr.open('GET', '/Artocarpus/menu.html', true);

xhr.onload = function() {
if (xhr.status === 200) {
// 替换菜单内容
menuElement.innerHTML = xhr.responseText;
console.log('菜单已成功替换');
} else {
console.error('加载菜单失败，HTTP状态码: ' + xhr.status);
}
};

xhr.onerror = function() {
console.error('网络错误，无法加载菜单');
};

xhr.send();
} else {
console.error('未找到class="menu"的TD元素');
}
});

3. 在各页面中引入 JavaScript

在每个HTML页面的 <head> 部分添加：

 

html

<script type="text/javascript" src="/Artocarpus/javascript/menu-loader.js"></script>

在Perl CGI程序中同样添加：

 

perl

print qq~
<head>
<!-- 其他头部元素 -->
<script type="text/javascript" src="/Artocarpus/javascript/menu-loader.js"></script>
</head>
~;

实现原理

  1. menu.html 只包含菜单的内部内容，不包含外层的 <td class="menu"> 标签
  2. menu-loader.js 查找页面中的 <td class="menu"> 元素，并用 menu.html 的内容替换其内部内容
  3. 这种方式保留了原有的页面结构，只替换菜单部分

这个方案的优点是简单、高效、对现有页面结构影响最小。当你需要更新菜单时，只需修改 menu.html 文件，所有页面的菜单将自动更新。