makissm

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

3 сообщения в этой теме

<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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Нужно добавить 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>
makissm понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Большое спасибо, все заработало.

Тему можно закрыть.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации сообщений.

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу