- Просмотров - 331
- Комментариев - 0
- Рейтинг - из 5 ()
Описание:
Всем привет, предлагаем вам скрипт табы для вашего контента. В интернете много решений но многие сложны и не всегда работают. Мы предлагаем вам легкий вариант установки и настройки ваших вкладок, плюс ко всему вкладки понимают URL и открывают сами нужный контент на основе хэш.
Установка:
1. Добавим HTML код:
Где: href="#tab1" и class="uTabs tab1" равен id="tab1" для открытия окон.
2. Добавим js код:
3. Добавим CSS для изначального вида:
Всем привет, предлагаем вам скрипт табы для вашего контента. В интернете много решений но многие сложны и не всегда работают. Мы предлагаем вам легкий вариант установки и настройки ваших вкладок, плюс ко всему вкладки понимают 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>
<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>
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>
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>
- LeKcUs
- Профиль автора
Авторизируйтесь на сайте, чтобы иметь возможность скачивать архивы с сайта.
Источник: не указан
