Javascript / Jquery替代“ display：none”？

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便遭受了嚴重破壞。

我可以使用腳本做些什么來在加載時隱藏內容嗎？ 鑒於現有腳本不會干擾輪播，這可能是一個合適的解決方案。

Answer 1

有多種選項可隱藏頁面上的內容。

display: none;

這是您當前使用的那一種，它折疊內容（即元素不占用頁面上的任何空間。

visibility: hidden;

這將隱藏內容，但不會折疊，因此雖然不可見的元素仍然占據頁面上相同的空間（如果要在列表或導航欄中隱藏和顯示元素而又不使內容來回跳躍，則很有用） 。

opacity: 0;

類似於隱藏的可見性，但仍允許用戶觸發事件或跳至元素。

還有其他幾個，但這是最有用的三個。 您介意對造成嚴重破壞的部分進行詳細說明嗎？ 鑒於問題有點模糊，為您提供正確的工具有點困難。

Answer 2

只需將內容ID初始化為最初在文檔加載時隱藏即可，如下所示：

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

然后，讓條件腳本遵循此操作，以按click事件的順序顯示和隱藏。 初始化隱藏可以使其他事情正常工作，而無需嘗試同時運行腳本。 <-不確定我是否正確解釋了