简体   繁体   English

如何使用Java脚本替换和隐藏Div内容

[英]How to Replace and Hide Div Contents Using Javascript

Can you help me to make a javascript function to: (1) show div contents in showarea when the two buttons are clicked, (2) replace content in the showarea if it contains show1/show2 (3) hide the content. 您能帮我做一个javascript函数吗:(1)单击两个按钮时,在showarea中显示div内容;(2)如果showshow中包含show1 / show2的内容,则替换showarea中的内容;(3)隐藏内容。

Scenario: When the button SUB button is clicked, it'll show Show1's contents to the ShowArea, but when the DOM button is clicked, it'll replace the contents of ShowArea which is Show1 and display the contents of Show2. 场景:单击SUB按钮时,它将Show1的内容显示到ShowArea中,但是当单击DOM按钮时,它将替换ShowArea的内容Show1,并显示Show2的内容。 But when you click again the DOM button, it will now hide the ShowArea and it's border. 但是,当再次单击DOM按钮时,它将隐藏ShowArea及其边框。

Here is the sample code: 这是示例代码:

<div id="credentials">
  <div id="user">
    <button id="button" type="button" onclick="Open('Show1');">SUB</button> 
    <br>
    <button type="button" onclick="replace('Show1','Show2')">DOM</button>
  </div>
</div>

<div id="showarea" style="border: 2px solid #365278">
  <div id="studentlogin">
    <div id = "Show1">
        <form name="form" method="get" action="studenthome.html" onclick="replace()" onsubmit="return validateStudent(this)">
            Enter your ID NUMBER<br><input type="text" name="student" id="studentID" /><br>
            <input type="submit" value="Log-in" >       
        </form>
    </div>
  </div>

<div id="facultylogin">
<div id = "Show2">
<form name="form" method="get" action="facultyhome.html" onclick="replace()" onsubmit="return validateFaculty(this)">
Enter your FACULTY ID <br><input type="text" name="faculty" id="facultyID" /><br>
<input type="submit" value="Log-in" >   
</form>

</div>
</div>  
</div>
</div>

These two functions is what I've created. 这是我创建的两个函数。 replace function to replace the content and Open to show or hide the div. replace函数替换内容,然后单击Open打开以显示或隐藏div。 but the replace() only works for the DOM.. 但是replace()仅适用于DOM。

function replace(id,content) { 
var container = document.getElementById(id); 
container.innerHTML = content; 
} 
function Open(idMyDiv){ 
var objDiv = document.getElementById(idMyDiv); 
if(objDiv.style.display == "inline"){ 
objDiv.style.display = "none"; 
} else { 
objDiv.style.display = "inline"; 
}

Thanks 谢谢

我假设这是“作业分配”,因此仅提示:Node.replaceChild()如果您使用的是jQuery之类的库:jQuery.replaceWith()

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM