Простой пример табов на jQuery

Введение

Простой пример табов на jQueryВ процессе создания сайтов не редко приходится создавать все возможные табы(переключатели). Для их реализации существует много готовых библиотек, но использовать готовые решения не интересно, да и к тому же готовые библиотеки сложней настраивать и подстраивать под себя, чем свой собственный код. Поэтому я хочу привести простой пример табов на 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 вкладки

Рассказать друзьям:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*