Question

我正在为一家中餐馆建立一个网站。我有一个下拉导航菜单，其中有一个menu.html页面的链接，当用户使用鼠标指针浏览菜单链接时，该页面会显示食品类别。每个类别都应该显示一个价格表，所有价格表数据都存储在一个XML文件中。每个类别都应该在同一页面上显示其价目表 - menu.html页面。正在使用JavaScript函数检索和显示XML数据，该函数使用<a>从下拉菜单中的onclick标记调用。当我按下下拉列表中的链接时，这种情况很有效，但只有当我已经在menu.html页面上时才会这样做。

问题是，当我想按下菜单页面之外的链接（例如主页）时，它只显示菜单页面但没有XML数据（价目表）。我假设无法在page1上调用js函数并在page2上执行，特别是如果它应该从page2通过document.getElementById和innerHTML数据获取元素他们。整个想法是只有一个菜单页面，显示存储在一个XML文件中的选定价格表。

有没有简单的方法可以解决这个问题，或者这首先是一个坏主意？顺便说一句，我是初学者，这是我的第一个网站，这可能很简单，但我不知道从哪里开始，因为我对JavaScript的了解很差......提前感谢...

以下是代码：

的JavaScript ：

function chooseMeal(Meal){

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","menu1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 


y=xmlDoc.getElementsByTagName(Meal);

var menu = document.getElementById("menuDiv");  //menuDiv is a div element on the menu.html page where the pricelist should be shown

menu.innerHTML = ('<div id="firstLine" ><u>'+y[0].nodeName+'</u></div> <br/>');

for (i=0;i<y.length;i++)
  {
  menu.innerHTML += (y[i].childNodes[1].childNodes[0].nodeValue);
  menu.innerHTML += ("<span>"+y[i].childNodes[3].childNodes[0].nodeValue+"</span>");
  menu.innerHTML += ("<br>");
  }
}

HTML ：

<ul class="menu" align="center" >

<li><a href="index.html">&nbsp;home</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="menu.html">menu</a>


<ul class="drop_down" style="z-index: 999;">
        <li ><a href="menu.html" onclick="chooseMeal('Pork');return false;" >pork</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Chicken');return false;" >chicken</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Veal');return false;" >veal</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Seafood');return false;" >seafood</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Soup');return false;" >soup</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Vegetarian');return false;" >vegetarian</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Rice');return false;" >rice</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Salad');return false;" >salad</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Sauces');return false;" >sauces</a></li>
        <li><a href="menu.html" onclick="chooseMeal('Dessert');return false;" >dessert</a></li>
    </ul>

在另一个页面上调用JavaScript函数

0 个答案: