Jump to content

jquery табы не срабатывает


Recommended Posts

<div class="tabs">				
 <span class="head-tabs">
  <a class="tabs-a" href="#tab1">1</a>
  <a class="tabs-a" href="#tab2">2</a>
  <a class="tabs-a" href="#tab3">3</a>
 </span>					
 <div class="bg-tabs">
  1
 </div>
 <div class="bg-tabs">
  2
 </div>
 <div class="bg-tabs">
  3
 </div>
</div>

<script type='text/javascript' >
$(function () {
	var tabContainers = $('div.tabs > div'); // получаем массив контейнеров
	tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
	// далее обрабатывается клик по вкладке
	$('.tabs-a').click(function () {
		tabContainers.hide(); // прячем все табы
		tabContainers.filter(this.hash).show(); // показываем содержимое текущего
		$('.tabs-a').removeClass('active'); // у всех убираем класс 'selected'
		$(this).addClass('active'); // текушей вкладке добавляем класс 'selected'
		return false;
	}).filter(':first').click();
});
</script>

Прошу подскажите, где здесь ошибка?

У блоков div везде прописан style="display: none;" а должно быть у не активных блоков.

делал с этого примера _vremenno.net/js/how-to-create-tabs-with-jquery

Заранее очень благодарен.

Link to post
Share on other sites

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

Нужно добавить ID к вашим дивам с контентом.

 

Замените

<div class="bg-tabs">
1
</div>
<div class="bg-tabs">
2
</div>
<div class="bg-tabs">
3
</div>

на

<div class="bg-tabs" id="tab1">
1
</div>
<div class="bg-tabs" id="tab2">
2
</div>
<div class="bg-tabs" id="tab3">
3
</div>
Link to post
Share on other sites
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...