javascript tabs
 

Всем привет. Сегодня у меня нестандартный вопрос. Я решил реализовать табы на js (впервые). Их реализацию вы можете увидеть по ссылке

http://jsfiddle.net/zenrgu38/

Но лично мне кажется, что реализация хромает. каждый раз браузер обходит элементы в цикле - не очень эффективное решение. Мне интересно ваше мнение. Большое спасибо! =)

Да, и забудем про то, что это не кроссбраузерно(getElementsByClassNam e, addEventListener and classList) ибо исправить это не такая большая проблема. Вопрос именно в реализации.

реши через делегирование событий

забудь про некроссбраузерность

para[0].classList.remove("hide");

Вот это явно не в цикле должно быть ) Этого вообще не должно быть. Че за дрочка - добавили класс hide - передумали, убрали класс hide ))

По клику никаких циклов уже не должно быть. Ну не нужно добавлять класс hide элементам, которые уже и так его имеют. Добавляй его только нескрытому элементу.

Smike,
http://jsfiddle.net/zenrgu38/1/

Вот и я с этого начинал велосипедить :)
Мои две реализации табов на jQuery
http://jsfiddle.net/vlasenkofedor/82kSU/
на чистом JS
http://jsfiddle.net/vlasenkofedor/jLprM/
Но совершенству нет предела, так что улучшайте

Тем не менее у профессоров все на циклах.

Отсюда вопрос. Произвольный доступ можно ведь организовать на двух сущностях - current и previous - или практически нельзя?

Это всего лишь переменные. С каких пор переменные нельзя использовать практически? И причем тут произвольный доступ.

Нда, то что этот элемент в цикле - явная глупость =)

Рони, не понимаю одного в этом примере.

вот ты сохраняешь в переменную old первый параграф и скрываешь его при клике на link.
как тогда скрываются другие параграфы? то есть para[1], para[2] и т.д.

Smike,
в переменной old всегда находится элемент открытый в прошлый раз - перед открытием нового элемента -- элемент в old скрывается -- в него записывается новый и новый old открывается - так понятнее?

Рони, я понял! Это гениально, сам бы в связи с отсутствием опыта не додумался до такого =)

Большое всем спасибо за помощь!
очень радует, что здесь живой форум, и люди тратят свое время помогая таким как я.

Напоследок у меня такой вопрос ко всем. Есть ли смысл использовать document.ready (из jquery) или аналоги на js в реальных проектах?
или же нужно просто добавлять скрипты перед </body> ?

Smike,
как вам и коду удобнее :)
http://javascript.ru/forum/jquery/32...ent-ready.html
http://javascript.ru/forum/misc/2418...at-kod-js.html
http://javascript.ru/forum/misc/3018...-v-fajjle.html
ещё найдутся темы если поискать.

Во всех проектах всегда так делаю. Кто так не делает - вероятно не любит быстрые сайты. Или считает что у всех посетителей оптоволокно )

А я пишу скрипты прямо в хтмл. Будет мне за это оптоволокно?

Придется процитировать целиком

Ибо его олд пиздит:

var para = document.getElementsByClassName("para");
for(var j = 1; j < para.length; j++) {
	var par = para[j];
	par.classList.add("hide");
}

var links = document.getElementsByClassName("link"), old = para[0];

for(var i = 0; i < links.length; i++) {
	var link = links[i];
	link.addEventListener("click", function() {
	    old.classList.add("hide");
        old = this.nextElementSibling
		old.classList.remove("hide");
	}, false);
}

о том что у него на стеке глубиной 1 сделано. Это обычный цикл заретушированной раздачей экземпляра листовки всем участникам по-очереди.

Слабо сделать без единого for? Напрягитесь, вы сможете.

kostyanet,
ничего не понял из того что вы написали, впрочем как обычно.