Введение
В процессе создания сайтов не редко приходится создавать все возможные табы(переключатели). Для их реализации существует много готовых библиотек, но использовать готовые решения не интересно, да и к тому же готовые библиотеки сложней настраивать и подстраивать под себя, чем свой собственный код. Поэтому я хочу привести простой пример табов на jQuery, который каждый может написать сам за 5 минут.
Простой пример табов на jQuery. Код
Приступим к реализации. Для начала напишем стили:
.main_tabs_div{
width: 500px;
margin: 50px auto 0;
}
.main_tabs_div .tabs{
margin: 0;
padding: 0;
}
.tabs li{
display: inline-block;
width: 100px;
height: 25px;
border: 1px solid;
text-align: center;
cursor: pointer;
}
.tabs li.active{
border-bottom: 1px solid #FFF;
}
.tabs_divs{
border: 1px solid #000;
margin-top: -1px;
}
.tabs_divs div{
display: none;
padding: 20px;
}
.tabs_divs div.active{
display: block;
}
А теперь html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Простой табов на jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_tabs_div">
<ul class="tabs">
<li class="active">вкладка 1</li>
<li>вкладка 2</li>
<li>вкладка 3</li>
</ul>
<div class="tabs_divs">
<div class="active">
текст 1 вкладки
</div>
<div>
текст 2 вкладки
</div>
<div>
текст 3 вкладки
</div>
</div>
</div>
</body>
</html>
И js:
$(document).ready(function(){
$('.tabs li').click(function(){
$('.tabs li').removeClass('active');
$(this).addClass('active');
var num_active = $('.tabs').find('.active').index();
$('.tabs_divs div').removeClass('active');
$('.tabs_divs div').eq(num_active).addClass('active');
});
});
Вот и все. Исходники вы можете скачать — тут. А также ниже можно посмотреть рабочий пример табов на jQuery.
Простой пример табов на jQuery. Рабочий пример
- вкладка 1
- вкладка 2
- вкладка 3
текст 1 вкладки
текст 2 вкладки
текст 3 вкладки
(3 оценок, среднее: 3,33 из 5)
Идеальный скрипт для меня, то что искал. В представленной демке скрипт не работает, но это уже другой вопрос )
Очень лаконичный код, без лишнего. Работает так: соотносит 2 списка, один из которых табы, другой, соответственно, блоки, которые нужно открыть/скрыть. Первый таб соотвествует первому блоку, второй — второму и т.д.