Меню

13.07.2020
157
0
Один из пользователей моего блога спросил меня, как возможно реализовать вкладки на сайте uCoz, как вы понимаете речь идёт о табах, которые легко переключать между собой в пару кликов мыши и лицезреть нужную нам информацию без перезагрузки страницы, как это принято в многих других решениях. Демо

Установка

Во-первых, данные табы можно смело ставить в систему uCoz, не подключая дополнительные библиотеки jQuery,
Во-вторых, на страницу сайта можно становить несколько блоков с табами.

Шаг 1 - Установим JS:
Для начало нам следует установить основной js который будет отвечать за переключение табов, для этого в самый низ страницы перед закрывающим тегом
Код
</body>
ставим js:

Код
<script src="http://www.center-dm.ru/data/jQuery/tabi/tab.js" type="text/javascript"></script>
Шаг 2 - Установим HTML:
Создаём основную ячейку div (id="tabs-1"), которая будет отвечать за номер табов, если вы захотите добавить несколько табов на страницу вашего сайта, то следует изменить данный ID на соответствующие цифры, а в выше предоставленном скрипте tab.js, в конце кода, добавить строку с соответствующим номером таба, например makeTabs('tabs-2');

Используем списки, в которые помещаем ссылку с названием того или иного таба и за место основной ссылки, прописываем якорь #first, #second, #third, #four при нажатии на которые, будет показано содержимое нужной ячейки.

После списков, создаём div ячейки с ID, названия которых соответствую якорям в списках id="first", id="second" , id="third", id="four" в данных ячейках будет расположена нужная вам информация.

Код
<!-- Начало тегов табы -->  
<div id="tabs-1">  
  <div class="tabs">  
   
  <ul class="tabNavigation">  
  <li><a href="#first">Толстой Л. Н.</a></li>  
  <li><a href="#second">Wilfred Peterson</a></li>  
  <li><a href="#third">Т.Эдисон</a></li>  
  <li><a href="#four">Альберт Швейцер</a></li>  
  </ul>  
   
  <div id="first" class="tab_content">  
  Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой.  
  </div>  
   
  <div id="second" class="tab_content">  
  Успех состоит в том, чтобы сфокусировать всю энергию, заключенную в вас, на той цели, которую вы так страстно желаете достичь  
  </div>  
   
  <div id="third" class="tab_content">  
  Достоинства человека должны определяться его делами, а не тем, что о нем говорят.  
  </div>  
   
  <div id="four" class="tab_content">  
  Счастье – это хорошее здоровье и плохая память  
  </div>  
   
  </div>  
</div>  
<!-- /Конец тегов табы -->

Шаг 3 - Установим CSS:
Теперь нам следует для правильного отображение вкладок прописать следующие css стили:

Код
/* Табы  
------------------------------------------*/  
#tabs-1 {text-align:center; margin-top: 20px;}  
.tabNavigation {list-style:none; margin: 0; padding: 0;}  
.tabNavigation li {  
  display: inline;  
  margin: 0px 5px 0px 5px;  
  text-shadow: 1px 1px 1px #fff;  
}  

.tabNavigation li a {  
  color: #555;  
  background: url('fon_tab_01.gif') repeat-x top #F1F0F0;  
  border-top: 1px solid #cecece;  
  border-right: 1px solid #cecece;  
  border-left: 1px solid #cecece;  
  padding: 6px 10px 6px 10px;  
}  

.tabNavigation li a.selected,ul  
.tabNavigation li a.selected:hover {color:#555; background:#fff; border-bottom: 1px solid #fff; }  
.tabNavigation li a:hover {color: #555; background: url(http://www.center-dm.ru/data/jQuery/tabi/fon_tab_01.gif) repeat-x top #e9e9e9;}  
.tabNavigation li a:focus {outline: 0;}  

.tab_content {  
  overflow: hidden;  
  text-align:left;  
  border-top: 1px solid #cecece;  
  padding: 5px 0px 10px 0px;  
  margin-top: 6px;  
}  
/*------------------------------------------*/

В моём варианте, в css стили я добавил 1px белое изображение, которое прижато к верхней части вкладок, плюс основные вкладки выравнены по центру и изменена цветовая гамма на более приемлемую для восприятия пользователями.

Одним из плюсов данных вкладок являться тот факт, что пользователю видно, на какой вкладке он находиться и на какую вкладку он хочет перейти.

На этом всё, спасибо за внимание!
Рейтинг: 0.0/0
Всего комментариев: 0
Подписка: 1 Код *:

Категории раздела
Пользователи [1]
Все материалы для модуля: Пользователи
Каталога файлов [0]
Все материалы для модуля: Каталога файлов
Комментарий [2]
Все материалы для модуля: Комментарий
Мини-чат [0]
Все материалы для модуля: Мини-чат
Статистика [0]
Все материалы для модуля: Статистика
PHP [1]
Все материалы по языку: PHP
Форум [2]
Все материалы для модуля: Форум
Прочее [5]
Все материалы для любых модулей
Вход на сайт
Логин:
Пароль:
Баннерообмен

банерообмен, тут может стоять вашь банер    банерообмен, тут может стоять вашь банер

банерообмен, тут может стоять вашь банер    банерообмен, тут может стоять вашь банер

Наш опрос
Оцените мой сайт
Всего ответов: 10
Помощь проекту
Вы можете помочь в развитие данного проекта.
Мы будем вам очень признательны.
WMR R762436343376
WMZ Z782883784570
WME E687245834519
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0