Question

我知道标题听起来很简单，但我正在寻找一个从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'>&nbsp;</td><td width='20'>&nbsp;</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'>&nbsp;</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'>&nbsp;</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'>&nbsp;</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>

Answer 1

我有一个.js文件，其中包含动态菜单（mmLoadmenus（）），其中包含document.write（）函数内置的样式。

编辑.js文件。删除样式。如果您发布一些代码，也许我们可以帮助您。

Answer 2

实际上有一个jquery函数可以轻松地完成你想要的任务。

$('#DivID').toggleClass('ClassName');

有关此内容的更多信息以及用于添加和删除类的相关jquery函数，请访问：http://api.jquery.com/toggleClass/

Answer 3

代码工作非常好，但是我很少像这样更改Java脚本：

   document.write("<div class='glavna'><div class='prvi'>PrvaLOgo<div class='drugi'>Drugi Logo<div class='treci'>");

document.write（“

菜单列表1”）; writeMenu（1，menu1，menu1Links）; document.write（“菜单列表2”）; writeMenu（2，menu2，menu2Links）; document.write（“菜单列表3”）; writeMenu（3，menu3，menu3Links）; document.write（“ ”）;

从.js文件中提取动态菜单并以html格式显示

3 个答案: