Question

JavaScript新手，并想知道如何使用以下代码切换<div>可见性：

var toggle = {

    show : function(obj) {

        document.getElementById(obj).style.display = '';

    },

    hide : function(obj) {

        document.getElementById(obj).style.display = 'none';

    }

};

Answer 1

假设你有这样的HTML：

<div id="tooltip"></div>
<span id="blah"></span>

在javascript中，您将运行以下命令：

toggle.show("tooltip"); // shows the div with an id of "tooltip"
toggle.hide("blah");    // hides the span with an id of "blah"

Answer 2

我建议您查看jQuery。在jQuery中，您可以在一行中执行此操作：

$("#my_obj").toggle();

加快开发速度，也不会留下巨大的印记。

Answer 3

要显示div，请执行以下操作： toggle.show('myElement')

隐藏它： toggle.hide('myElement')

当然，您需要在DOM中的某个位置使用名为“myElement”的元素ID。

Answer 4

隐藏DIV的链接：

<a href="#" onclick="toggle_visibility('example'); return false;">Hide example div</a>

示例DIV：

<div id="example"></div>

您必须将DIV设置为隐藏在CSS中：

#example {
 display:none;}

和Javascript：

<script>

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

Answer 5

我建议使用jQuery toggle

参见示例here

使用JavaScript切换可见性

5 个答案: