7

我正在使用以下代码来切换 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 的可见性？让他们切换。

4

5 回答 5

9

你需要调用它：

<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 性能会更快。

于 2013-10-03T15:41:16.370 回答
8

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

<div style="display:none;">

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

于 2013-10-03T15:46:43.600 回答
6

由于您使用 CSS 来切换它，因此您应该使用 CSS 设置其初始状态： display:none在属性中内联style或理想情况下在全局样式表中。

于 2013-10-03T15:39:37.470 回答
4

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

div.item_name { display: none; }
于 2013-10-03T15:40:28.940 回答
2

尝试这个

  <!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>
于 2013-10-03T15:44:39.607 回答