Помогите с jquery пожалуйста

150

vechnyi

13 ноября 2012, 21:41

444

Здравствуйте!есть табы, подскажите пожалуйста, как сделать так чтобы можно было вставлять несколько на странице и они работали каждые отдельно... Сейчас если вставляю, то при наведении на навигацию у первых табов, срабатывают все остальные...


<div class="tabs">
	<div class="nav">
		<ul>
			<li>Таб1</li>
			<li>Таб2</li>
		</ul>
	</div>

	<div class="cont">
		<div class="kont">1</div>
		<div class="kont">2</div>
	</div>
</div>


$(document).ready(function(){
	$('.tabs .kont').hide();
	$('.tabs .kont:eq(0)').show();
	
	$('.tabs>.nav li').hover(function(){
		  var ind = $(this).index();
		 $('.tabs .cont').find('.kont:eq('+ind+')').show().siblings('.kont:visible').hide();
	})
	
});

Спасибо!

487

Geers

13 ноября 2012, 22:20

#1

vechnyi:
Сейчас если вставляю, то при наведении на навигацию у первых табов, срабатывают все остальные...

Так у вас практически все табы вставлены в один div.

45

fsou1

13 ноября 2012, 22:35

#2

Для того, чтобы одинаковые табы работали раздельно, им нужен признак, по которому отличать одну коллекцию от другой.

В вашем коде селектор ".tabs .kont" означает: для всех элементов, класс которых содержит "tabs" (<div class="tabs">), выбрать дочерние элементы, класс которых содержит "kont" (<div class="kont">1</div>).

Таким образом, если Вы добавите несколько одинаковых блоков кода, они все и будут работать по этому принципу, поэтому, самым простым решением будет у второй коллекции табов поменять наименование классов (достаточно переименовать class="tabs" в "tabs2") и к существующим селекторам ('.tabs .kont') добавить правило выборки для вторых табов ('.tabs .kont, .tabs2 .kont') для каждого случая, дабы копированию кода противопоставить дополнение в правило выборки.

Не будет ли в Вопрос по грамотному Т.З. Бесплатный аудит сайтов: анализ

V

150

vechnyi

13 ноября 2012, 22:40

#3

fsou1, дело в том что мне как раз нельзя добавлять другие именна классов..

нужно именно чтобы были одинаковые...

45

fsou1

13 ноября 2012, 22:52

#4

В таком случае оберните их каждый в свой див

и меняйте селекторы '.mytabs1 .tabs .kont, .mytabs2 .tabs .kont'

V

150

vechnyi

13 ноября 2012, 22:55

#5

нельзя, их предполагается использовать произвольное количество раз на странице

45

fsou1

13 ноября 2012, 23:01

#6

Код Вам менять хоть можно?

Селекторов хоть отбавляй,- атрибуты дописывайте, name, id.

V

150

vechnyi

13 ноября 2012, 23:05

#7

нельзя, нужно чтобы был один и тот же код без добавления id и т.д

45

fsou1

13 ноября 2012, 23:12

#8

Колдуйте с $(this)

V

150

vechnyi

13 ноября 2012, 23:14

#9

ок, спасибо

Google: E-E-A-T не является фактором ранжирования

Что делать, чтобы попасть в ответы Google Bard