2016-06-13 92 views
0

这是我目前想出的代码。它填写正确的标题,但页面在页面标题匹配时不可见。我该如何解决这个问题? “如果页面标题,执行此代码”的正确方法是什么?Javascript:使一个div可见/不可见基于页面标题

<head> 
    <title>Page Name 1</title> 
</head> 
<body> 
    <style> 
     #notavailablemsg { 
     font-size: 30px; 
     color: #f04e37; 
     display: inline; 
     } 
     #notavailablemsg div { 
     display: inline; 
     visibility: hidden; 
     } 
     #submsg { 
     font-size: 22px; 
     visibility: hidden; 
     } 
     #pagename { 
     font-style: italic; 
     } 
    </style> 
    <center> 
     <div id="notavailablemsg"> 
      <div>The page </div> 
      <br> 
      <div id="pagename">page title</div> 
      <div> no longer exists</div> 
     </div> 
     <div id="submsg"> 
      We are sorry for the inconvenience. 
     </div> 
    </center> 
    <script> 
     var errortitle = document.getElementsByTagName("title")[0].innerHTML; 
     document.getElementById("pagename").innerHTML = errortitle; 
    </script> 
    <script> 
     if (errortitle == "Page Name 1") { 
      document.getElementByID("notavailablemsg").innerHTML.style.visibility = "visible"; 
      document.getElementByID("submsg").innerHTML.style.visibility = "visible"; 
     } 

    </script> 
</body> 
</html> 

@Midas回答:修改到

document.getElementById("notavailablemsg").style.visibility = "visible"; 
document.getElementById("submsg").style.visibility = "visible"; 
+0

你是否有意翻转你的'if'语句?现在,如果'errortitle'确实不**等于''页面名称1“',那么你就可以运行它。 – Jack

+2

'document.getElementByID(“submsg”)。innerHTML.style.visibility'应该是'document.getElementById(“submsg”)。style.visibility'。注意'getElementById'中的小d。 – Midas

+0

我会建议检查另一个变量,然后标题,如果这是可能的原因? –

回答

0

您可以使用document.title时获得当前的标题。

<!DOCTYPE html> 
<html> 
<head> 
    <title>YourGoodTitle</title> 
    <style> 
    div { 
     border: 1px solid red; 
     width: 100%; 
     height: 50px; 
     display: none; /* its good to use display: none to hide elements*/ 
    } 
    </style> 
</head> 

<body onload="myFunction()"> 

<h1>Hello World!</h1> 
<center> 
    <div id="notavailablemsg"> 
    Bad title 
    </div> 
    <div id="availablemsg"> 
    Glad you are here 
    </div> 
</center> 
<script> 
function myFunction() { 
    var title = document.title; 
    if(title == "YourGoodTitle") { 
     // select and make elements visible 
     document.getElementById("availablemsg").style.display = "block"; 
    } else { 
     // hide the elements you want, make their display = none; 
     // for example 

     document.getElementById("availablemsg").style.display = "none"; 

     // show your expected elements 
     document.getElementById("notavailablemsg").style.display = "block"; 
     } 
} 
</script> 

</body> 
</html> 

https://plnkr.co/edit/KS2obzXrUqtzT8FWUvwL?p=preview

所以,如果你的标题是YourGoodTitle,将显示YourGoodTitle消息。否则不好的标题将被打印

+0

好点,但不解决问题 – Midas

+0

是啊......我只是不小心按下提交按钮。我正在编辑它 –