简体   繁体   中英

How do Hide / Show DIV's based on Div ID Content

I have dynamically displayed content in DIVS, and I want to block certain DIVS from appearing. The code looks like this:

 <div class = "DivStyle" id="computer">
  <img src = "computer,jpg">
 </div>

 <div class = "DivStyle" id="harddisk">
  <img src = "harddisk.jpg">
 </div>

 <div class = "DivStyle" id="cable">
  <img src = "cable.jpg">
 </div>

etc.

How can I block the div tabled "harddisk" above from appearing using Javascript? Essentially I want to say "If ID = harddisk then display=none".

Thanks in advance!

Using plain javascript, this will hide your div:

document.getElementById('harddisk').style.display = "none";

A full example of where to locate the javascript:

<html>
<head></head>
<body>
    <div class = "DivStyle" id="computer">
      <img src = "computer,jpg">
    </div>
    <div class = "DivStyle" id="harddisk">
      <img src = "harddisk.jpg">
    </div>
    <div class = "DivStyle" id="cable">
      <img src = "cable.jpg">
    </div>
<script>
    document.getElementById('harddisk').style.display = "none";
</script>
</body>

The script must be executed after the DOM is loaded, move the code inside this block, like this

(function() {
    document.getElementById('harddisk').style.display = "none";
})();

if you are using an updatepabel use this one :

var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();

pageRequestManager.add_endRequest(function () {
    document.getElementById('harddisk').style.display = "none";
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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