如何在頁面上顯示和隱藏某些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？

回答

相關問題