如何在页面上显示和隐藏某些div？

我试图在我的文档中显示并隐藏某些div。
我已经把代码放在一起使用getElementById并希望将style.display应用于数组的每个元素。我不确定这是否可能。如何在页面上显示和隐藏某些div？

目前我的代码看起来是这样的：

的Javascript

<script> 
function chart1() { 
    var show = new array ["#chartdiv1", "#unit-price"]; 
    document.getElementByid("graph-container").show.style.display = "inline"; 
    var hide = new array ["#chartdiv2", "#unit-price-value", 
     "#chartdiv3", "#unit-price-value"]; 
    document.getElementByid("graph-container").hide.style.display = "none"; 
}; 
</script>

HTML

<div id="graph-container"> 
    <!-- Unit Price Dollar --> 
    <div id="unit-price" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">VPM Global Select Opportunities Fund - Dollar Unit Price 
     <br>Weekly: 2012/02/03 to 2014/10/24</div> 
    <div id="chartdiv1" style="width:100%; height:600px;"></div> 
    <!-- Unit Price Dollar Target Return --> 
    <div id="unit-price-value" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of $1000 Invested at inception relative to Target Return 
     <br>Weekly: 2012/02/03 to 2014/10/24</div> 
    <div id="chartdiv2" style="width:100%; height:600px;"></div> 
    <!-- Unit Price Rand Versus Inflation --> 
    <div id="unit-price-rand" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of R1000 Invested at inception relative to Inflation Benchmarks 
     <br>Weekly: 2012/02/03 to 2014/10/24</div> 
    <div id="chartdiv3" style="width:100%; height:600px;"></div> 
    <div style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; color: #666; clear: both; margin-top: 20px;"> 
     <br>* VPM GSO - VPM Global Select Opportunities Fund</div> 
    <br> 
</div> 
<!-- End Graph Container-->

原始的Javascript，在IE11，Safari浏览器，歌剧，火狐和Chrome的工作

这是我创建的在IE8-10以外的所有浏览器中都可以使用的原始代码，也许有人可以在此指导我。

function chart1() { 
    document.getElementById("chartdiv1").style.display = "inline"; 
    document.getElementById("unit-price").style.display = "block"; 
    document.getElementById("chartdiv2").style.display = "none"; 
    document.getElementById("unit-price-value").style.display = "none"; 
    document.getElementById("chartdiv3").style.display = "none"; 
    document.getElementById("unit-price-rand").style.display = "none"; 
    }; 
    </script>

您的帮助是非常感谢。

来源

2014-11-05 jasonh

如果jQuery是一个选项，然后添加jQuery标签。 – 2014-11-05 08:59:29

我认为你正在尝试做的是这样的：

function chart1() { 
    var show = ["chartdiv1", "unit-price"]; 
    for (var i = 0; i < show.length; ++i) 
     document.getElementById(show[i]).style.display = "inline"; 
    var hide = ["chartdiv2", "unit-price-value","chartdiv3", "unit-price-value"]; 
    for (var i = 0; i < hide.length; ++i) 
     document.getElementById(hide[i]).style.display = "none"; 
    };

这样，你itearate两个阵列上，这样在演出的元素显示，其他隐藏。的问题是：

如果你使用纯JS，而不是CSS或jQuery的

的ID是不带＃
数组正确的语法是阵列
你必须遍历元素，以隐藏/显示他们每个人的
你有选择的getElementById后删除隐藏/显示，因为这样你正在访问的属性，对象

来源

2014-11-05 08:47:57 Michael

我已经试过这段代码，它似乎没有工作，它的好代码，并使逻辑意义上，如果显示数组大于我应该显示或不显示。我什至试图用新的数组，并删除了＃的会有其他任何其他我可以尝试此代码。 – jasonh 2014-11-05 09:36:52

我试过这个jsFiddle，它似乎工作： http://jsfiddle.net/0w4bc0vo/ 你可以看到只有两个div – Michael 2014-11-05 09:41:41

我加了我的原代码问题你能告诉我吗？在IE 8-10中不起作用。 – jasonh 2014-11-05 10:18:55

您正在混合使用纯JS和JQuery。在纯JS $("#graph-container").hide();

style.display = "none";

所以，对你：

jQuery的hide()和show()

所以，你document.getElementByid("graph-container").style.display = "none";

对于hidden和none之间的区别：What is the difference between visibility:hidden and display:none?

来源

2014-11-05 08:45:01

你可以引导一些jQuery代码，这些代码可以做我想要的相同功能。 – jasonh 2014-11-05 08:48:58

尝试使用它，它应该工作。

document.getElementById("graph-container").style.visibility="visible"; //Show the container 
var hide = new array ["#chartdiv2", "#unit-price-value","#chartdiv3", "#unit-price-value"]; 
    document.getElementById("graph-container").style.visibility="hidden"; //Hide the container

来源

2014-11-05 08:45:07 Mernayi

里面试试这个，使用Java类CRIPT

document.getElementById("<your tag id>").style.visibility = "hidden";

并再次显示元素，你可以使用，

document.getElementById("<your tag id>").style.visibility = "visible";

小demontration我摘录提交。检查它是否可以帮助你。

<html> 
 
<body> 
 

 
<div id="myP">This is a p element.</div> 
 

 
<button type="button" onclick="myFunction()">Hide content of div</button> 
 
<button type="button" onclick="myFunction1()">Show content of div</button> 
 

 
<script> 
 
function myFunction() { 
 
    document.getElementById("myP").style.visibility = "hidden"; 
 
} 
 
    function myFunction1() { 
 
    document.getElementById("myP").style.visibility = "visible"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

使用jQuery，您可以使用show()和hide()方法。 JQuery show and hide method

来源

2014-11-05 08:50:35 ajitksharma

如何在页面上显示和隐藏某些div？

回答

相关问题