Extracting a dynamic menu from .js file and display it in html_问答_开发者

I know the title sounds easy but I am looking for an example that extracts the dynamic menu from a javascript file and displays it in a html webpage. The catch to it is that the javascript file that contains the dynamic menu has the style in which to display the menu and I don't want the style. I want the manu items so I can use my own css with it.

I am a beginner in javascript. So bear with me while I try to paint you a picture.

I have a .js file which contains the dynamic menu (mmLoadmenus()) with a style built into the document.write() function.

I use mmLoadMenus(); to call the function from the loaded javascript. It loads with the styles in place. I cannot overwrite the styles with my css. How can I load the menu and use my own css.

I have tried jquery functions and there does not seems to be anything that would strip the .js of the styles. And re-write the .js menu file is not an option as its being called by various parties.

Does anyone have a solution for this or encountered this issue and has a solution for it?

I have attached the code to question now...

.js file code:

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' cellpaddi开发者_开发技巧ng='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 code

<!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>

There is actually a jquery function to easily do just what you want.

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

More info on this and related jquery functions to add and remove classes can be found here: http://api.jquery.com/toggleClass/

I have a .js file which contains the dynamic menu (mmLoadmenus()) with a style built into the document.write() function.

Edit the .js file. Remove the styles. If you post some code, maybe we can help you out.

Code work very nice, but I am little change java script like this down:

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

document.write("

Menu list 1"); writeMenu(1, menu1, menu1Links); document.write(" Menu list 2"); writeMenu(2, menu2, menu2Links); document.write("Menu list 3"); writeMenu(3, menu3, menu3Links); document.write(" ");