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 Show/Hide using jquery中创建的一个例子。

<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

这两者都做同样的事情

JS显示/隐藏div

6 个答案: