如何使用单击按钮切换div的可见性

时间:2023-01-19 17:05:16

Below is my javascript code which i used to show a div when clicked on a button.

下面是我的javascript代码,我用它来显示单击按钮时的div。

How can I hide it when clicked again? And then on clicking it, div should be visible again?

再次点击时如何隐藏它?然后单击它,div应该再次可见?

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>

5 个解决方案

#1


24  

In case you are interested in a jQuery soluton:

如果您对jQuery soluton感兴趣:

This is the HTML

这是HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

This is the jQuery script

这是jQuery脚本

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

You can see it working here:

你可以看到它在这里工作:

http://jsfiddle.net/BQUyT/

http://jsfiddle.net/BQUyT/

If you don't know how to use jQuery, you have to use this line to load the library:

如果您不知道如何使用jQuery,则必须使用此行来加载库:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

And then use this line to start:

然后使用此行开始:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

So for this case the final code would be this:

所以对于这种情况,最终的代码是这样的:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

Let me know if you need anything else

需要帮助请叫我

You can read more about jQuery here: http://jquery.com/

你可以在这里阅读更多关于jQuery的信息:http://jquery.com/

#2


40  

To switch the display-style between block and none you can do something like this:

要在块和无之间切换显示样式,您可以执行以下操作:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

working demo: http://jsfiddle.net/BQUyT/2/

工作演示:http://jsfiddle.net/BQUyT/2/

#3


1  

Try following logic:

尝试以下逻辑:

<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>

#4


0  

with JQuery .toggle() you can accomplish it easily

使用JQuery .toggle(),您可以轻松完成它

$( ".target" ).toggle();

#5


0  

jQuery would be the easiest way if you want to use it, but this should work.

如果你想使用它,jQuery将是最简单的方法,但这应该有效。

<script type="text/javascript">
    function showHide(){

        var e = document.getElementById('e');

    if ( e.style.display != 'none' ) {
        e.style.display = 'none';
    }
    else {
        e.style.display = '';
    }

}
</script>

#1


24  

In case you are interested in a jQuery soluton:

如果您对jQuery soluton感兴趣:

This is the HTML

这是HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

This is the jQuery script

这是jQuery脚本

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

You can see it working here:

你可以看到它在这里工作:

http://jsfiddle.net/BQUyT/

http://jsfiddle.net/BQUyT/

If you don't know how to use jQuery, you have to use this line to load the library:

如果您不知道如何使用jQuery,则必须使用此行来加载库:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

And then use this line to start:

然后使用此行开始:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

So for this case the final code would be this:

所以对于这种情况,最终的代码是这样的:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

Let me know if you need anything else

需要帮助请叫我

You can read more about jQuery here: http://jquery.com/

你可以在这里阅读更多关于jQuery的信息:http://jquery.com/

#2


40  

To switch the display-style between block and none you can do something like this:

要在块和无之间切换显示样式,您可以执行以下操作:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

working demo: http://jsfiddle.net/BQUyT/2/

工作演示:http://jsfiddle.net/BQUyT/2/

#3


1  

Try following logic:

尝试以下逻辑:

<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>

#4


0  

with JQuery .toggle() you can accomplish it easily

使用JQuery .toggle(),您可以轻松完成它

$( ".target" ).toggle();

#5


0  

jQuery would be the easiest way if you want to use it, but this should work.

如果你想使用它,jQuery将是最简单的方法,但这应该有效。

<script type="text/javascript">
    function showHide(){

        var e = document.getElementById('e');

    if ( e.style.display != 'none' ) {
        e.style.display = 'none';
    }
    else {
        e.style.display = '';
    }

}
</script>