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

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Умные Url Табы | uPd v1.2 + Шаблонизатор
DEMO +
Всем привет, предлагаем вам скрипт табы для вашего контента. В интернете много решений но многие сложны и не всегда работают. Мы предлагаем вам легкий вариант установки и настройки ваших вкладок, плюс ко всему вкладки понимают URL и открывают сами нужный контент на основе хэш.

Установка:
1. Добавим HTML код:
Код
<a href="#tab1" class="uTabs tab1">TAB 1</a>
<a href="#tab2" class="uTabs tab2">TAB 2</a>
<a href="#tab3" class="uTabs tab3">TAB 3</a>

<div id="tab1" class="tabs">Open 1</div>
<div id="tab2" class="tabs">Open 2</div>
<div id="tab3" class="tabs">Open 3</div>


Где: href="#tab1" и class="uTabs tab1" равен id="tab1" для открытия окон.

2. Добавим js код:
Код
<script>BestUrl = location.href;  
BestUrl = BestUrl.split('#')[1];  
setTimeout(function () { $('title').html(BestUrl);
$('.uTabs:eq(0)').addClass('tActive');  
$('.tabs:eq(0)').show();  
if(BestUrl.indexOf('tab') != -1) { $('.uTabs:eq(0)').removeClass('tActive'); $('.tabs').hide(); $('div#'+BestUrl).show();  
$('.'+BestUrl).addClass('tActive');
};  
}, 10);  
$('.uTabs').click(function() {  
$('.uTabs').removeClass('tActive');
$('.tabs').hide();  
BestTab = $(this).attr('href');  
$(''+BestTab+'').show();
$(this).addClass('tActive');
});</script>


3. Добавим CSS для изначального вида:
Код

<style>.tabs {display:none;}
a.uTabs {
  padding: 5px;
  font-family: helvetica, arial, sans-serif;
  text-decoration: none;
  background: cyan;
  color: darkcyan;
  margin: 0px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
}
.tabs {
  background: #544f6b;
  padding: 5px;
  color: aliceblue;
  font-family: helvetica, arial, sans-serif;
  font-size: 11px;
}
.tActive {background: #544f6b !important;color:#fff !important;}</style>


Вот и все можете написать свой CSS вид под свой дизайн сайта.
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

При копировании материала указываем источник ucods.3dn.ru

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Marishka
Дата добавления: 13.10.2016 в 18:30 по МСК
Категория: Другие модули
Просмотров: 799
Комментариев: 0
Эмоций:
  • Оценки читателей

    ЗАКРЫТЬ
    • 0 Лайк
    • 0 Лавки
    • 0 Ахахах!
    • 0 Ого!
    • 0 Восторг
    • 0 Печаль
    • 0 Грусняшь

Теги: css, хэш, html, js, Tab, url
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]