Question

在我的网站中我构建了一个文本菜单作为menu.html里面的iframe.each href我放入单独的div。我希望根据父页面的标题，其中一个div的类别将被更改（例如：如果父级的标题是“home”，则上述div的类将更改为“标记”）。我尝试过以下脚本，但它仍然无法正常工作。怎么了？再次感谢！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
switch (window.parent.document.title) {
case "hoempage":document.getElementById("nada1").className="marked"; break;
case "about": document.getElementById("nada2").className = "marked"; break;
        case "jokes": document.getElementById("nada3").className = "marked"; break;
        case "freewares": document.getElementById("nada4").className = "marked"; break;
        case "links": document.getElementById("nada5").className = "marked"; break;
        default: alert("god damn!"); break;
    }

</script>
</head>
<body dir="rtl">
<ul class="menu1">
<li><a href="Index.html" target="_parent"><div id="nada1">homepage</div></a></li>
<li><a href="About.html" target="_parent"><div id="nada2">about</div></a>  </li>
<li><a href="Jokes.html" target="_parent"><div id="nada3">jokes</div></a></li>
<li><a href="freewares.html" target="_parent"><div id="nada4">freewares</div></a>    </li>
<li> <a href="NetGames.html" target="_parent"><div id="nada5">links</div></a>    </li>
</ul>
<br /><br /><hr />
<div class="write_mail">if you want to rgister to site updates enter name + email:
<form action="sent.php" method="post" >
    <input type="text" name="subscr" /><br />email
    <input type="text" name="perosnal"/><br />name
    <br />
    <input type="submit" name="submit" onclick="alert('good job and thanks!');"/>    </form></div>

</body>
</html>

编辑：我尝试了解决方案，但它仍然拒绝工作。这是父代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body dir="rtl">
<iframe src="menu.html" class="navibar" height="430px" width="50px" scrolling="no" style="border-style:none"></iframe>
<br />
<p class="About">built by zetta the beginner 2012<br /> 
</p>
</body>
</html>

并且menu.html是我在消息开头更新的代码。再次抱歉骚扰:(

Answer 1

您忘记在每个break;后使用case。请参阅，只要case有效，就会执行以下命令，直到break停止：

switch(value){
   case c0: f0();
   case c1: f1();
   case c2: f2();
   default: f3();
}

现在，如果value等于c1，则会执行f1()。调用下一个标签（case c2）代替f2，f2和f3也是如此。您需要停止执行案例：

switch(value){
   case c0: f0(); break;
   case c1: f1(); break;
   case c2: f2(); break;
   default: f3(); break; // doesn't really need a break since it is the last
}

虽然这可能看起来反直觉，但这是遵循DRY概念的唯一方法：

switch(myletter){
   case 'A':
   case 'B':
   case 'C': alert("Hey, it's either A,B or C"); break;
   default: alert("Sorry, I don't know this letter yet :/");
}

有关详细信息，请参阅MDN: switch。

Answer 2

嵌入iframe代码的页面如下：

      <html>
<head>
<title>main</title>
<style>
.marked{background:yellow}
</style>
</head>
<body>
<div id="class1">dddddddddddddddd</div><div id="class2">dddddddddddddddd</div>
<iframe src="iframe.htm"></iframe>
</body>
</html>

iframe页面代码：

    <html>    
    <head>   
    <title>something</title>
    <script type="text/javascript">       
    switch (window.parent.document.title) {         
        case  "main": window.parent.document.getElementById("class1").className = "marked";break;
        case "About": window.parent.document.getElementById("class2").className = "marked";break;
        case "Interesting facts":             
    document.getElementById("class3").className =  "marked";break;
        default: alert("I failed, sorry! :(");   break; 
     }    
    </script>   
    </head>
    <body></body>  
    </html>

根据父标题更改html页面（位于iframe内）中的div类

2 个答案: