JS显示/隐藏DIV

我的CSS：JS显示/隐藏DIV

#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>

不工作，我想我错过了什么！

来源

2012-12-12 Froxz

你在css中设置'visibility'，但是在js中改变'display''加上一些语法错误...... – elclanrs

＃a_x200 {display：none;宽度：200像素;高度：200像素; background-color：black;} 仍然不能正常工作 – Froxz

@PoWeR您可以在[jsFiddle]（http://jsfiddle.net）中重新创建问题吗？ –

您正在使用visibility: hidden隐藏它，然后尝试使用display CSS属性使其可见。他们是两个完全独立的属性，改变一个不会奇迹般地改变另一个。

如果要使其可见再次，改变的值visibility属性visible：

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

来源

2012-12-12 09:45:16

您输入小姐spled

应该是这样的：

我的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>

来源

2012-12-12 09:43:31 AMember

使用'document.getElementById（'a_x200'）'完全没问题，它只是让函数上的参数完全没有意义。 –

@PoWeR在你的函数中也缺少大括号:) :) – bipen

@Anthony Grist他没有使用传递给他方法的参数，我改变了它，所以它会得到id作为参数。 – AMember

试试这个...

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

编辑

如果您在按钮点击通知onclick="showStuff('a_x200');"。你已经将id作为参数发送给你的函数..所以我正在使用该参数并使用它。

你的情况

有参数，但不使用它......但它确实的samething ...

OR u能做到这一点

<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

这都做同样的事情

来源

2012-12-12 09:43:55 bipen

有什么区别？ showStuff（id）id = ??? – Froxz

@PoWeR他重命名函数的参数，然后将其传递给'document.getElementById（）'调用。当调用'showStuff（）'时，'id'的值将会改变，这取决于你传递的第一个参数。如果你做'showStuff（'a_x200'）'（就像你点击按钮时那样），那么'id'将等于''a_x200''。 –

@AnthonyGrist ...谢谢:) – bipen

试试这个：

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

来源

2012-12-12 09:45:22

在这里，您可以SE我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>

来源

2012-12-12 09:55:43

你可以试试这个代码：

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>

试试这个代码，它会解决你的问题。

来源

2012-12-12 10:02:03 simbu94

JS显示/隐藏DIV

回答

相关问题