jQuery Tabs Short

HTML:
<div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>        
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>

jQuery:
$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

CSS:
.wrapper .active { color: red; }

thank u

Супер!

realy cool

Cool!!!!!!

Отлично!
Спасибо

Спасибо за уроки

thank you!

Чтобы лучше понять, как работает скрипт, пришлось прочесть эту статью: http://zencoder.ru/jquery/index-jquery/

А если у нас несколько табов на странице? Скрипт неправильно будет работать

Вот так можно реализовать:

tabs();

$('.tab-list li').click(function() {
var obj = $(this);
var container = obj.parents('.tab-container');
var index = obj.index();
$('.tab-list li', container).removeClass('active').eq(index).addClass('active');
$('.tab-pane .pane', container).removeClass('active').eq(index).addClass('active');
});

function tabs () {
$('.tab-container').each(function() {
$('.tab-list li', this).eq(0).addClass('active');
$('.tab-pane .pane', this).eq(0).addClass('active');
});
}

а подскажите как в таком варианте сделать активный нужный таб? не первый?

excelente wow 👍

Столкнулся с проблемой отображения карусели owl.carousel во вкладках кроме первой, и не получается инициализировать эту карусель ещё раз по клику на табе.

Спасибо, полезная вещь!

Спасибо!

thanks

Странно когда запускаю просто в хтмл работает, как запускай на сайте. Появляется ошибка и не работает. Uncaught ReferenceError: $ is not defined
at common.js:1

ty

@AndreyKondakov Вы не подключили jQuery

Спаибо!!!

Работает!

Спасибо

not cool

От души!

Всё прекрасно работает но когда каждый .tab находиться в классе Bootstrap (.col-lg-2), то не работает переключение. Как бы это можно было исправить?