Javascript/Jquery alternative to "display:none"?

Javascript/Jquery alternative to "display:none"?

本文关键字：quot none display to Javascript Jquery alternative      更新时间：2023-09-26

我有一个菜单，当您单击菜单项时显示或隐藏内容。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现在对我在投资组合部分安装的轮播造成了严重破坏。

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

有几个选项可以隐藏页面上的内容。

display: none;

这是您当前使用的那个，它折叠内容（即元素不占用页面上的任何空间。

visibility: hidden;
这会隐藏内容，

但不会折叠，因此元素虽然不可见，但仍会在页面上占用相同的空间量（如果要隐藏和显示列表或导航栏中的元素而不使内容来回跳转，则很有用）。

opacity: 0;

类似于可见性隐藏，但仍允许用户触发事件或按 Tab 键转到元素。

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

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

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

然后让条件脚本遵循此脚本，按照单击事件的顺序显示和隐藏。初始化隐藏允许其他事情工作，而无需脚本尝试同时运行。<-不确定我是否正确解释

相关文章：