Javascript альтернатива "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 Теперь наносит ущерб с a carousel С тех пор я установил в разделе портфолио.

Есть ли что-то, что я могу сделать со сценарием, чтобы скрыть содержимое при загрузке? Учитывая, что существующий скрипт не мешает карусели, это может быть правильным решением.

Answer 1

Существует несколько вариантов спрятать контент на странице.

display: none; 

Это один вы в настоящее время использует, который разрушается содержание (т.е. элемент не занимает никакого места на странице.

visibility: hidden; 

Это скрывает содержание, но не коллапс, так что элемент, пока не видно до сих пор занимает столько же места на странице (полезно, если вы хотите, чтобы скрыть и показать элементы в списке или навигационной панели, не делая вещи прыгать туда и обратно).

opacity: 0; 

Аналогично видимости скрыта, но все же позволяет пользователю запускать события или вкладку элемента.

Есть еще пара, но это основные три, которые были бы полезны. Не могли бы вы рассказать о причинах хаоса? Немного сложно предоставить вам нужные инструменты, учитывая, что проблема немного расплывчата.

Answer 2

Просто инициализировать идентификаторы контента быть изначально скрыты от нагрузки документа, как это:

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

Тогда пусть условный сценарий следовать за этим, чтобы показать и скрыть как заказано событие щелчка. Инициализация скрыть позволяет другим вещам работать без того, что ваш скрипт пытается работать одновременно. < - не знаю, правильно ли я объяснил, что