Делаем вкладки для сайта на JS

Делаем вкладки для сайта на JS

Долго думал, как правильно назвать эту статью, но так и не придумал сколь нибудь подходящего названия. Поэтому решил назвать ее так, как я пытался найти решение в поисковике.

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

Зачем нужны эти вкладки?

Все просто, чтобы вместить много информации на одну страницу и при этом не перегрузить ее лишней информацией.

В этом способе нет никаких рюшечек и слайдер-эффектов, так как требовалась простая техника переключения.

Реализовано это все с использованием фреймворка jQuery, так как практически на всех моих сайтах он подключен и городить рядом с ним килотонны дублирующего код, я думаю, не имеет смысла.

Пример

Нет ничего нагляднее, чем конкретный пример. Пример можно посмотреть здесь.

Как сделать вкладки для сайта на JS?

Для того, чтобы все также заработало у Вас на сайте, необходимо:

  1. Добавить небольшой JS-код и подключить jQuery:
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript"> 
     $(function() {
    	$("ul.tabs").tabs("div.panes > div");
    });
    </script> 
    

    Так как у меня все скрипты лежат в директории /js/, то примеры кода приведены, соответственно, относительно этого.
  2. Добавить CSS-стиль:
    div.panes div {
      display: none;
      }
  3. В том месте, где нужно вывести такие вкладки, добавляем код:
    <ul class="tabs">
      <li><a href="#">Вкладка 1</a></li>
      <li><a href="#">Вкладка 2</a></li>
    </ul>
    <div class="panes">
      <div class="les">Содержимое первой вкладки</div>
      <div class="les">Содержимое второй вкладки</div>
    </div>
    

    Первая ссылка соответствует первому контейнеру в DIVpanes, вторая – второму и так далее.

Это всё!

Возможно это не самый лучший способ реализовать вкладочный интерфейс прямо в браузере, но один из самых быстрых и строгих.

P.S. Конечно же, используя CSS можно придать абсолютно любой вид, который может походить и на настоящие вкладки, и на красивооформленный список. Тут все зависит только от Вас.

P.S. Большинство современных сайтов, которые сейчас разрабатываются, больше напоминают не информационные ресурсы, а целые интернет системы, которые тесно интегрируются в бизнес компании. И это не прихоть руководителей, а скорее всего современная необходимость.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: