Question

我使用以下代码切换div区域的可见性：

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

要切换它，我使用onclick =“toggle_visibility（'id_of_element_to_toggle'）;”

我不喜欢的部分是，这会在页面加载时默认显示。如何将其隐藏，直到切换为可见为止？如果可能的话，我想在同一个javascript块中执行此操作。越简越好。

如何一次切换2个div的可见性？让它们切换。

Answer 1

你需要打电话给它：

<script type="text/javascript">

toggle_visibility('id_of_element_to_toggle');

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

您也可以添加一些CSS：

#id_of_element_to_toggle{display:none;}

CSS的性能会更快。

Answer 2

因为您使用CSS来切换它，所以您应该使用CSS来设置其初始状态： display:none可以在style属性中内联，也可以在全局样式表中内联。

Answer 3

在这种情况下，我使用css隐藏div，无论是内联还是样式表，以便默认隐藏它。

<div style="display:none;">

或者，您可以在没有内容的情况下加载div，然后通过您的javascript使用e.innerHTML =“some content”或ajax填充它？

Answer 4

最简单的选择是在CSS中设置它，然后在执行Javascript之前，它将从浏览器应用样式的那一刻起真正设置为隐藏：

div.item_name { display: none; }

Answer 5

试试这个

  <!DOCTYPE html>
    <html>
    <body>
    <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    </script>
    <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
    <div id="foo" style="display:none">toggle visibility.</div>


    </body>
    </html>

如何使用javascript默认隐藏div？

5 个答案: