顯示/隱藏 div，使用純 JS

Question

我的CSS：

#a_x200{
    visibility: hidden;
    width: 200px;
    height: 200px;
    background-color: black;
}

我的JS：

<script type="text/javascript">
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

我的 HTML

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>

不工作我想我錯過了一些東西！

Answer 1

試試這個：

document.getElementById('a_x200').style.visibility = 'visible';

Answer 2

你可以試試這個代碼：

HTML Code:
        <div id="a_x200" style="display:none;">asd</div>
        <input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

Java script:

<script type="text/javascript">
function showStuff(id) {
        document.getElementById(id).style.display = "block";
}
</script>

試試這個代碼它會解決你的問題。

Answer 3

您正在使用visibility: hidden來隱藏它，然后嘗試使用display CSS 屬性使其可見。 它們是兩個完全獨立的屬性，改變一個不會神奇地改變另一個。

如果要使其再次可見，請將visibility屬性的值更改為visible ：

document.getElementById('a_x200').style.visibility = 'visible';

Answer 4

在這里，您可以看到我使用 jquery在 jquery Show/Hide 中創建的一個示例。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

</style>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>​

Answer 5

你的輸入是錯的

應該是這樣的：

我的JS

<script type="text/javascript">
function showStuff(a_x200) {
        document.getElementById(a_x200).style.display = 'block';
}
</script>

我的 HTML

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

Answer 6

試試這個...

function showStuff(id) {
    document.getElementById(id).style.display = 'block'; // OR
    document.getElementById(id).style.visibility = 'visible'; 
} 

編輯

如果你注意到你的按鈕點擊onclick="showStuff('a_x200');" . 您已經將 id 作為參數發送給您的函數..所以我正在使用該參數並使用它。

在你的情況下有參數但不使用它......雖然它做同樣的事情......

或者你可以這樣做

<input type="button" class="button_p_1" onclick="showStuff();"></input>  // omitting double 'n'

function showStuff() {
    document.getElementById('a_x200').style.display = 'block';
}  // missing curly bracket 

這兩者都做同樣的事情