我知道标题听起来很简单，但我正在寻找一个从 javascript 文件中提取动态菜单并将其显示在 html 网页中的示例。要注意的是，包含动态菜单的 javascript 文件具有显示菜单的样式，而我不想要该样式。我想要 manu 元素，这样我就可以使用我自己的 css。
我是 JavaScript 的初学者。所以请耐心等待我给你画一幅画。
我有一个 .js 文件，其中包含动态菜单 (mmLoadmenus())，其样式内置于 document.write() 函数中。
我使用 mmLoadMenus();从加载的 javascript 调用函数。它加载了适当的样式。我无法用我的 CSS 覆盖样式。如何加载菜单并使用我自己的 CSS。
我已经尝试过 jquery 函数，但似乎没有任何东西可以去除样式的 .js。重写 .js 菜单文件不是一个选项，因为它被各方调用。
有没有人对此有解决方案或遇到此问题并有解决方案？
我现在已经附上问题的代码...
.js文件代码:
function mmLoadMenus() {
menu1 = new Array();
menu1Links = new Array();
menu2 = new Array();
menu2Links = new Array();
AddItem(menu1, menu1Links, "Google", "http://www.google.com/");
AddItem(menu1, menu1Links, "Yahoo", "http://www.yahoo.com/");
AddItem(menu2, menu2Links, "Google 2", "http://www.google.com/");
AddItem(menu2, menu2Links, "Yahoo 2", "http://www.yahoo.com/");
document.write("<table width='1003' height='33' border='0' cellspacing='0' cellpadding='0'><tr valign='top'><td width='174'> </td><td width='20'> </td><td bgcolor='#FFFFFF' width='809'>");
document.write("<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td height='20' class='Menulist' width='100%'><table height='19' border='0' cellspacing='0' cellpadding='0' width='100%'><tr>");
document.write("<td class='Bulletlist1'> </td><td width='124' height='19' onMouseOver='showMenu(1);' onMouseOut='hideMenu(1);'><a href='#'><div class='Menu' id='Menu1'>Menu list 1</div></a>");
writeMenu(1, menu1, menu1Links);
document.write("</td><td class='Bulletlist2'> </td><td width='124' height='19' onMouseOver='showMenu(2);' onMouseOut='hideMenu(2);'><a href='#'><div class='Menu' id='Menu2'>Menu list 2</div></a>");
writeMenu(2, menu2, menu2Links);
document.write("</td><td width='141' height='19'> </td></tr><tr><td height='1' bgcolor='#999999' colspan='11'></td></tr></table></td></tr></table></td></tr></table>");
}
function AddItem(myMenu, myMenuLinks, myTitle, myLink) {
myMenu.push(myTitle);
myMenuLinks.push(myLink);
}
function writeMenu(myMenuID, myMenu, myMenuLinks) {
myMenuColor = new Array("", "#79155a", "#cc333d", "#e57e00", "#98b000", "#00b5a9");
document.write("<div id='menuLayer"+ myMenuID +"' style='position:absolute;z-index:1;top:28px;visibility:hidden;'>");
document.write("<TABLE cellspacing=0 cellpadding=4 style='border-top: 1px solid #777777; border-left: 1px solid #777777; background-color: #F2F2F2; FONT-FAMILY: Verdana; FONT-SIZE: 9px; width: 193px; cursor: hand;'>");
for (i=0; i<myMenu.length; i++) {
document.write("<TR><TD style='border-bottom: 1px solid #777777; border-right: 1px solid #777777; COLOR: "+myMenuColor[myMenuID]+";' onclick='document.location=\""+ myMenuLinks[i] + "\"' onmouseover='this.style.color=\"#f2f2f2\"; this.bgColor=\""+myMenuColor[myMenuID]+"\"' onmouseout='this.style.color=\""+myMenuColor[myMenuID]+"\"; this.bgColor=\"#f2f2f2\"'><B> "+ myMenu[i] +"</B></TD></TR>");
}
document.write("</TABLE></div>");
}
function showMenu(myMenuID) {
document.getElementById("menuLayer" + myMenuID).style.visibility = "visible";
}
function hideMenu(myMenuID) {
document.getElementById("menuLayer" + myMenuID).style.visibility = "hidden";
}
.html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Dummy Index page</title>
<script language="text/javascript" src="resources/jquery-1.4.4.min.js"></script>
<script language="JavaScript1.2" src="resources/TopNav3.js"></script>
</head>
<body>
<div>
<script language="JavaScript1.2">mmLoadMenus();</script>
</div>
</body>
</html>
最佳答案
实际上有一个 jquery 函数可以轻松地做你想做的事。
$('#DivID').toggleClass('ClassName');
有关此功能和用于添加和删除类的相关 jquery 函数的更多信息，请参见此处:http://api.jquery.com/toggleClass/
关于javascript - 从 .js 文件中提取动态菜单并在 html 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4514523/