Question

单击菜单项时，我有一个显示或隐藏内容的菜单。 JQuery看起来像这样：

        $(document).ready(function() {

    $("#bioLink").click(function(){
        $("#about").show(1000);
        $("#portfolio, #contact, #expand").hide(1000);
    }); // end bio-click
    $("#portfolioLink").click(function(){
        $("#portfolio").show(1000);;
        $("#about, #contact, #expand").hide(1000);
    }); // end portfolio-click
    $("#contactLink").click(function(){
        $("#contact").show(1000);
        $("#about, #portfolio, #expand").hide(1000);
    }); // end contact-click
}); // end ready

在网站的旧版本中，使用此CSS规则在首次加载页面时隐藏所有内容：

    #about, #portfolio, #contact {
        display:none;
}

现在，CSS已经在a carousel中肆虐，我已经在投资组合部分安装了。

我可以用脚本在加载时隐藏内容吗？鉴于现有脚本不会干扰轮播，这可能是一个合适的解决方案。

Answer 1

隐藏页面上的内容有几种选择。

display: none;

这是您目前正在使用的内容，它会折叠内容（即该元素不占用页面上的任何空间。

visibility: hidden;

这会隐藏内容，但不会崩溃，因此不可见的元素仍会占用页面上相同的空间量（如果您想要隐藏和显示列表或导航栏中的元素而不会使某些内容跳回来，则非常有用

opacity: 0;

与隐藏的可见性类似，但仍允许用户触发事件或制表符元素。

还有其他几个，但这些是最有用的三个。你介意详细说明破坏性的破坏吗？鉴于问题有点模糊，为您提供合适的工具有点困难。

Answer 2

只需初始化最初隐藏在文档加载上的内容ID，如下所示：

    $( document ).ready(function() {
      $( "#about, #portfolio, #contact" ).hide();
   });

然后让条件脚本按照此方式按照click事件的顺序显示和隐藏。初始化隐藏允许其他操作无需脚本尝试同时运行。＆lt; - 不确定我是否正确解释

Javascript / Jquery替代“display：none”？

2 个答案: