Question

使用javascript（没有jquery）我想定位articleContent div并在点击一个名为＆＃34; div＆＃34;的div的按钮后显示它。点击一个名为＆＃34;关闭＆＃34;的div后，让它消失。我尝试了一下但不知道从哪里开始以及如何使其正常运转。

<body>
    <div id="container">
        <div id="header">
             <h1 class="h1"><img src="images/header2.PNG"/> </h1>
        </div>
        <div id="navbar">
            <div id="navbar"> <b> <img src="images/home2.png" width="109" height="54"/> </b>
 <b><img src="images/about.png" width="l09" height="54"/> </b>
 <b><img src="images/news.png" width="109" height="54"/></b>
 <b><img src="images/contact.png" width="109" height="54"</b> 
            </div>
            <div id="article1" class="articleContent">
                <p class="font">This is the content</p>
                <p class="font"></p>
            </div>
            <div id="footer">&copy;2014 | Privacy | Contact Information</div>
</body>
</html>

Answer 1

假设你有包含open和close id的div，你可以这样做：

var article = document.getElementById('article1');
article.style.display = 'none';
document.getElementById('open').onclick= function(){
  article.style.display = 'block';
}
document.getElementById('close').onclick= function(){
 article.style.display = 'none';
}

Answer 2

您可以使用javascript功能。示例：

function open(){

 document.getElementById(one).style.display = 'block';
}

function hide (){
   document.getElementById(one).style.display = 'hide';
}

Answer 3

function open(e) {
    e.removeAttribute("style");
}

function close(e) {
    e.style.display = "none";
}

使用按钮调用这些函数，传递要打开/关闭的元素。

<button id="open" onclick="open(document.getElementById('article1'))" />

<button id="close" onclick="close(document.getElementById('article1'))" />

Answer 4

您可以使用onclick（）= function（）{// handle event}来跟踪鼠标点击请参阅以下链接以获取更多信息：
事件属性部分：http://www.w3schools.com/tags/tag_div.asp
鼠标事件部分：http://www.w3schools.com/tags/ref_eventattributes.asp

然后你可以使用javascript设置div显示属性：
http://www.w3schools.com/js/js_htmldom_css.asp
css dispay property：
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.w3schools.com/js/js_htmldom_events.asp

  open=document.getElementById("openDiv");
  open.onclick=function(){
    document.getElementById("articleContent").style.display=hidden;
  }
  hide=document.getElementById("hideDiv");
  hide.onclick=function(){
    document.getElementById("articleContent").style.display=initial;
  }

我没试过，但我认为它应该有效。祝你好运。

如何使用javascript在onclick上显示div？

4 个答案: