如何添加一个功能,这样一个按钮会使div消失/出现?

时间:2013-04-17 06:20:25

标签: javascript html

我在javascript中创建了一个函数,通过单击按钮显示div,但是我希望在第二次单击后使用相同的按钮使其消失,等等。

JAVASCRIPT

<script>
function show( elem )
{
    $('.dynamic_link').hide();
    $('#'+elem).show();
}
</script>

HTML

<a href="#" onclick="show('link1')" id="buton"><p> BUTTON</p></a>
    <div id="link1" class="dynamic_link" style="display:none;">
        <h1>SHOWING SOMETHING</h1>
    </div>

我可以在主要功能中更改什么或添加另一个功能,这样按钮就能发挥作用?感谢。

3 个答案:

答案 0 :(得分:2)

使用jQuery函数toggle()slideToggle()

像这样:

$('#button').click(function(){
    $('#link1').toggle();
});

答案 1 :(得分:0)

在调用javascript函数时使用这样的方法

document.getElementById("link1").style.display='';
document.getElementById("link1").style.display='none';

答案 2 :(得分:0)

请遵循以下示例:

<强> HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

<强> jQuery的:

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

了解更多信息:jQuery Toggle