Форум Сайтостроение Веб-строительство

Джава скрипт....

werty1001
На сайте с 30.03.2008
Offline
82
werty1001
673 

/* === Sidebar Tabs === */

function sidebar_tabs() {

	$j('ul.tabs li').hover(

		function() { $j(this).addClass('hover'); },

		function() { $j(this).removeClass('hover'); }

	);

	$j('ul.tabs').each(function(i) {

		i += 1; var div1 = i*2-1; var div2 = i*2;

		$j('ul.tabs.tabs'+i+' li').click(function(){

			var thisClass = this.className.slice(0,3);

			$j('div.t'+div1).animate({ height: 'hide', opacity: 'toggle' }, 450);

			$j('div.t'+div2).animate({ height: 'hide', opacity: 'toggle' }, 450);

			$j('div.' + thisClass).animate({ height: 'show', opacity: 'toggle' }, 900);

			$j('ul.tabs.tabs'+i+' li').removeClass('tab-current');

			$j(this).addClass('tab-current');

		});

	});

}

<ul class="tabs tabs1">

<li class="t1 tab-current"><h3><span>1111</span></h3></li>

<li class="t2"><h3><span>2222222222</span></h3></li>

</ul>

<div class="t1">111111111111111111</div>

<div class="t2">2222222222222222222</div>

Здрасте я нуб в js, подскажите как сделать чтобы было не 2 вкладки а например 4

вот чтобы было понятнее http://pfc-tetris.spb.ru/

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
KeTal
На сайте с 25.08.2005
Offline
54
KeTal
#1 


<ul class="tabs tabs1">

<li class="t1 tab-current"><h3><span>1111</span></h3></li>

<li class="t2"><h3><span>2222222222</span></h3></li>

<li class="t3"><h3><span>3333</span></h3></li>

<li class="t4"><h3><span>444</span></h3></li>



</ul>



<div class="t1">111111111111111111</div>

<div class="t2">2222222222222222222</div>

<div class="t3">333333333333</div>

<div class="t4">44444444444444</div>

Вообще по логике так должно работать. :)

werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#2
KeTal:

<ul class="tabs tabs1">

<li class="t1 tab-current"><h3><span>1111</span></h3></li>

<li class="t2"><h3><span>2222222222</span></h3></li>

<li class="t3"><h3><span>3333</span></h3></li>

<li class="t4"><h3><span>444</span></h3></li>



</ul>



<div class="t1">111111111111111111</div>

<div class="t2">2222222222222222222</div>

<div class="t3">333333333333</div>

<div class="t4">44444444444444</div>


Вообще по логике так должно работать. :)

не так не работает всмысле работает с глюками :o

KeTal
На сайте с 25.08.2005
Offline
54
KeTal
#3 

<ul class="tabs tabs1">

<li class="t1 tab-current"><h3><span>1111</span></h3></li>

<li class="t2"><h3><span>2222222222</span></h3></li>

<li class="t6"><h3><span>333333</span></h3></li>

<li class="t8"><h3><span>444444</span></h3></li>

</ul>

<div class="t1">111111111111111111</div>

<div class="t2">2222222222222222222</div>

<div class="t6">333</div>

<div class="t8">44444</div>

Вот так должно работать.

Если все равно глючит, то надо в CSS подкорректировать что-то. Вообще лучше обратиться к докам по jQuery, я им не пользовался, поэтому не знаю, как там все устроено. Могу только предполагать.

Использованы 6 и 8, потому что они в CSS прописаны у Вас.

div.t2,

div.t4,

div.t6,

div.t8,

div.t10 {

display: none;

}

werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#4

пробывал тоже не то

думаю точнее надеюсь что тут есть специалисты

KeTal
На сайте с 25.08.2005
Offline
54
KeTal
#5

werty1001, вы бы лучше попробовали разобраться в проблеме, почитать документацию. Наверняка там все написано. Если будете так всегда ждать пока за вас все решат, то не научитесь ничему.

Оставьте этот код ХТМЛ как есть, а функцию замените на эту

function sidebar_tabs() {

$j('ul.tabs li').hover(

function() { $j(this).addClass('hover'); },

function() { $j(this).removeClass('hover'); }

);

$j('ul.tabs').each(function(i) {

i += 1; var div1 = i*2-1; var div2 = i*2;

$j('ul.tabs.tabs'+i+' li').click(function(){

var thisClass = this.className.slice(0,3);

$j('div.t'+div1).animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+div2).animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+'6').animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+'8').animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.' + thisClass).animate({ height: 'show', opacity: 'toggle' }, 900);

$j('ul.tabs.tabs'+i+' li').removeClass('tab-current');

$j(this).addClass('tab-current');

});

});

}

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#6

KeTal

Я пробывал разные варианты не получилось..

Документацию ? Этот скрипт увидел на одном сайте, вот решил себе поставить...

Или вы имеете ввиду документацию jQuery? Начинать разбираться в jQuery только из-за одного скрипта не стану, если люди, которые разбираются помогут - отлично, не помугут не смертельно

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
KeTal
На сайте с 25.08.2005
Offline
54
KeTal
#7

werty1001,

Оставьте этот код ХТМЛ как есть, а функцию замените на эту 


function sidebar_tabs() {

$j('ul.tabs li').hover(

function() { $j(this).addClass('hover'); },

function() { $j(this).removeClass('hover'); }

);

$j('ul.tabs').each(function(i) {

i += 1; var div1 = i*2-1; var div2 = i*2;

$j('ul.tabs.tabs'+i+' li').click(function(){

var thisClass = this.className.slice(0,3);

$j('div.t'+div1).animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+div2).animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+'6').animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.t'+'8').animate({ height: 'hide', opacity: 'toggle' }, 450);

$j('div.' + thisClass).animate({ height: 'show', opacity: 'toggle' }, 900);

$j('ul.tabs.tabs'+i+' li').removeClass('tab-current');

$j(this).addClass('tab-current');

});

});

}



<ul class="tabs tabs1">

<li class="t1 tab-current"><h3><span>1111</span></h3></li>

<li class="t2"><h3><span>2222222222</span></h3></li>

<li class="t6"><h3><span>333333</span></h3></li>

<li class="t8"><h3><span>444444</span></h3></li>

</ul>

<div class="t1">111111111111111111</div>

<div class="t2">2222222222222222222</div>

<div class="t6">333</div>

<div class="t8">44444</div>
werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#8

KeTal

Большое спасибо,видите для вас это легко, я б наверно год изучал бы ....

Ведь форумы для этого и существуют, жаль репу вам поднять не могу, еще раз спасибо!

KeTal
На сайте с 25.08.2005
Offline
54
KeTal
#9

werty1001, на самом деле я просто поковырялся как следует. Изначально не думал, что вкладки нужно в javascript добавлять, исходя из того, что если бы писал сам такую функцию, то сделал бы как-то автоматически или хотя бы глобальную переменную с кол-вом вкладок. Поэтому сразу не смог правильно ответить, пока у себя на компьютере это все не запустил.

Не думайте, что я специально тут мурыжил :) Удачи!

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий