"display:none"的 Javascript/Jquery 替代品？

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;

类似于可见性隐藏，但仍允许用户触发事件或点击元素。

还有其他几个，但这是有用的主要三个。您介意详细说明造成严重破坏的部分吗？鉴于问题有点模糊，很难为您提供正确的工具。