Как сделать вкладки на CSS без перезагрузки?

1. Каждую таблицу в отдельный слой.

<div id="tbl1">

Таблица 1

</div>

<div id="tbl2">

Таблица 2

</div>

<div id="tbl3">

Таблица 3

</div>

2. В таблице стилей можно прописать так:

#tbl1,#tbl2, #tbl3 {display: none; position: absolute; top: ??Px; left: ??Px;}

#tbl1 {display: block;}

3. Простейший JS:

function switch(numb)

{

document.getElementById('tbl1').style.display = 'none';

document.getElementById('tbl2').style.display = 'none';

document.getElementById('tbl3').style.display = 'none';

document.getElementById('tbl'+numb).style.display = 'block';

return false;

}

4. Вызов можно так:

<div onclick="switch(1);">Таблица 1</div>

<div onclick="switch(2);">Таблица 2</div>

<div onclick="switch(3);">Таблица 3</div>

З.Ы.

Это в простейшем виде, без навешивания всяких обработчиков и т.д.

не получается.... Ошибку выдал.

Придумайте другое название для функции switch

Опишите задачу более подробнее.

КиллерМЕН, так вроде все понятно и пример рабочий, за исключением зарезервированного слова switch

СКОРПИОН, Shtogrin, заработало! Огромное спасибо за помощь!

Спасибо. Я просто не понял, что switch зарезервировано и искал, что же это за таинственная функция.

Работающий пример. Может кому пригодится:

[ATTACH]10373[/ATTACH]

zonner, сам принцип вы поняли, теперь можете посмотреть более сложные (дизайн табов и их размешение) примеры http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

Это точно на примере этого обсуждения модифицировал 2 js: один управляет переключением картинок, второй табов в таблице.

Вопрос:

Почему 2 js-скрипта не хотят работать совместно? Функции пересекаются?

1:

onload = function() {

	var e, i = 0;

	while (e = document.getElementById('gallery00').getElementsByTagName ('DIV') [i++]) {

		if (e.className == 'on00' || e.className == 'off00') {

		e.onclick = function () {

			var getEls = document.getElementsByTagName('DIV');

				for (var z=0; z<getEls.length; z++) {

				getEls[z].className=getEls[z].className.replace('show00', 'hide00');

				getEls[z].className=getEls[z].className.replace('on00', 'off00');

				}

			this.className = 'on00';

			var max = this.getAttribute('title');

			document.getElementById(max).className = "show00";

			}

		}

	}

}

2:

onload = function() {

	var e, i = 0;

	while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) {

		if (e.className == 'switch') {

		e.onclick = function () {

				var getEls = document.getElementById('gallery').getElementsByTagName('DIV');

				for (var z=0; z<getEls.length; z++) {

				getEls[z].className=getEls[z].className.replace('show', 'hide');

				w=getEls[z].previousSibling;

				while (w.nodeType!=1) {

					w=w.previousSibling;

					}

				w.className=w.className.replace('switch over', 'switch');

				w.className=w.className.replace('switch off', 'switch over');

				}

			this.className = this.className == 'switch' ? 'switch off' : 'switch';

			x=this.nextSibling;

			while (x.nodeType!=1) {

				x=x.nextSibling;

				}

			x.className = this.className == 'switch off' ? 'show' : 'hide';

			}

		}

	}

}

Взято здесь:

http://www.stunicholls.com/gallery/simply_more.html

проименуй вторую и поставь её вызов в первую, а то у тебя две на онлоад....

не очень понял. Можно экзампл?