2016-02-01 3 views
0

У меня есть сайт, на котором в основном отображается информация, связанная с деловым домом. Я не хочу иметь многостраничный сайт (о нас, свяжитесь с нами и другими такими страницами), но у меня есть значительное количество контента, который будет показан.Использование jQuery для скрытия/отображения содержимого

И я бы не хотел загружать контент снова и снова через последовательные выборки с сервера через AJAX.

Итак, могу ли я загрузить все содержимое, загруженное на первую загрузку, и показать только необходимое содержимое (видимое) и скрыть и показать соответствующий контент с помощью jQuery. Это правильный подход, который можно принять? Каковы его возможные недостатки?

+0

Это можно сделать, но вы можете использовать библиотеку, такую ​​как knockout.js, вместо использования jQuery. Однако не рекомендуется использовать скрытые div-файлы с большим количеством контента: он замедляет загрузку страницы, ее трудно поддерживать, и это может быть трудно для чтения с экрана и SEO. Я отказался от вашего вопроса, потому что он чрезвычайно широк – KWeiss

ответ

0
<a href="#about-us" title="About Us">About Us</a> 

<div id="about-us" class="content">Some content here</div> 


<script> 
    $(document).ready(function(){ 
     $('a').click(function(){ 
      var link = $(this).attr('href'); 
      $('.content').hide(); 
      $(link).show(); 
     }); 
    }); 
</script> 
2

Что вы спрашиваете, может быть достигнуто с каркасом Singlepage как: http://alvarotrigo.com/fullPage/ или AngularJS

Плюсы:

  • Фронтальный доступ ко всему контенту сразу

Минусы:

  • Длительная загрузка страницы, которая может привести к 404 или медленному подключению
  • В зависимости от пользовательского устройства. Если у пользователя нет текущего браузера, ваша страница может сломаться.
  • Клиент не может быть включен JavaScript, разбивая ваш сайт полностью
  • Если Eсть много данных, то пользовательское устройство может быть не в состоянии справиться с этим. JavaScript может быть довольно обременен более старыми устройствами.

EDIT 1

Мои личные предпочтения для решения Singlepage является AngularJS, так что если вы заинтересованы в этом я бы рекомендовал этот учебник:

scotch.io/tutorials/single-page- apps-with-angularjs-routing-and-templating