Умные вкладки

Yahoo! · February 13, 2010

Как сделать, что б содержимое всех вкладок при отключении скриптов были все показаны (display: block), а при скриптах содержимое неактивных вкладок было спрятано? И сами вкладки при скриптах были показаны, а при отключении скриптов - скрывались.

В скриптах, ламер я)

Попробовал

function tab() {
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none"
document.getElementById("tab").style.display = "block"
}

#t2, 
#t3 {display: block}
#tab {display: none}

<body onLoad="tab; return false">...</body>

...ничего

В гугле всё перерыл, нашёл супер-вкладки. Там как раз как я хочу, но не понимаю как там это устроено всё...

Буду очень-очень благодарен за помощь.

Edited February 13, 2010 by Yahoo!

psywalker · February 13, 2010

Дружище, вот попробуй такой вариант, подойдёт? Скажи, чё не так?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	ul { list-style: none; overflow: hidden;}
		ul li { float: left;}
			ul li a { 
				display: block; 
				padding: 10px 30px; 
				background: red; 
				font: bold 14px Verdana, Geneva, sans-serif;
				text-decoration: none;
				color: #300;
			}
	div#block div { display: block; background: #CFC; margin-bottom: 3px;}
	div#block div.active { display: block;}
	div#block div.none { display: none;}
	ul li.active a{ background: #993;}

</style>

</head>

<body>

	<ul id="menu">
		<li class="active"><a href="#" onclick="test(0); return false;">Overview</a></li>
		<li><a href="#" onclick="test(1); return false;">Requirements</a></li>
		<li><a href="#" onclick="test(2); return false;">Step By Step</a></li>
		<li><a href="#" onclick="test(3); return false;">Notes</a></li>
	</ul>

	<div id="block">
		<div>Content 1</div>
		<div>Content 2</div>
		<div>Content 3</div>
		<div>Content 4</div>
	</div>
<script>
	var block = document.getElementById('block')
	var blockDiv = block.getElementsByTagName('div')
	for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'
	blockDiv.item(0).className = 'active'
	function test(number){
		var menu = document.getElementById('menu')
		var li = menu.getElementsByTagName('li')

		var block = document.getElementById('block')
		var blockDiv = block.getElementsByTagName('div')

		for(var i = 0; i<li.length;i++) li.item(i).className = ''
		for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'

		li.item(number).className = 'active'
		blockDiv.item(number).className = 'active'

	}

</script>
</body>
</html>

s0rr0w · February 13, 2010

Принцип элементарный

Создается контейнер для переключателей табов.

Ниже - контейнер с содержимым в таком виде

<div>

Tab 1 content

</div>

<div>

Tab 2 content

</div>

При загрузке данного кода выполнить скрипт, который создаст переключатели табов на основании <h4>, удалит <h4>, скроет все контейнеры, активирует нужный.

Все

psywalker · February 13, 2010

Принцип элементарный
Создается контейнер для переключателей табов.
Ниже - контейнер с содержимым в таком виде
<h4>Tab 1</h4>
<div>
Tab 1 content
</div>
<h4>Tab 2</h4>
<div>
Tab 2 content
</div>
При загрузке данного кода выполнить скрипт, который создаст переключатели табов на основании <h4>, удалит <h4>, скроет все контейнеры, активирует нужный.
Все

Я по такому принципу и делал дружище :lol:

s0rr0w · February 13, 2010

У меня в примерах SC как раз такой вариант и используется.

Я по такому принципу и делал дружище

Не по такому. У тебя активаторы вкладок и контент разнесены в два разных контейнера. Я же предлагаю формировать динамически активатор.

psywalker · February 13, 2010

У меня в примерах SC как раз такой вариант и используется.
Не по такому. У тебя активаторы вкладок и контент разнесены в два разных контейнера. Я же предлагаю формировать динамически активатор.

Аа, типа клоны? Из одного шаблона?

s0rr0w · February 13, 2010

Аа, типа клоны? Из одного шаблона?

Да, клоны.

psywalker · February 13, 2010

Да, клоны.

Ага, понял тебя. Ну тут уже посложнее дубового метода. Поэтому на это нужно время. :lol:

Yahoo! · February 13, 2010

А я наверн с книжкой посижу =) Кстати посоветуйте, что-нибудь скриптами сделать, а то книжку читаю, сажусь за комп, а не знаю что делать! Копирую код с книги - ошибка блин. Можно скрипт взять и потихоньку разобрать, но опять же какой?

P.S.: скрипты эти наверн не для моего маленького мозга

psywalker · February 13, 2010

P.S.: скрипты эти наверн не для моего маленького мозга

У меня тоже самое, но я заставляю себя думать, и стараюсь делать, делать, пока не сделаю.

Yahoo! · February 14, 2010

psywalker, можешь ещё раз тот код выложить, только с комментариями в нём? А то я тупой)

psywalker · February 14, 2010

psywalker, можешь ещё раз тот код выложить, только с комментариями в нём? А то я тупой)

Какой код?

psywalker · February 14, 2010

Аа, тот который в начале, вверху? ОК, только вечером, щас дела.

psywalker · February 14, 2010

Держи, удачи тебе, если что непонятно, спрашивай :lol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	div.wrap { width: 805px; margin: 20px auto; }
	ul { list-style: none; overflow: hidden; border-left: 1px solid #000;}
		ul li { float: left;}
			ul li a { 
				display: block; 
				background: red; 
				width: 200px;
				font: bold 14px Verdana, Geneva, sans-serif;
				text-decoration: none;
				color: #300;
				border: 1px solid #000;
				border-left: 0;
				padding: 10px 0;
				text-align: center;
			}
			ul li a:hover { background: #333; color: #fff;}
	div#block div { /* Тут я сделал наши див блоками,для того, чтобы когда вырубаем скрипты, они все были показаны, как ты просил*/
		display: block; 
		background: #993; 
		margin-bottom: 3px; 
		border: 1px solid #000; 
		border-width: 0 1px 1px;
		padding: 10px;
		font: bold 50px Verdana, Geneva, sans-serif;
		color: #fff;

	}
	div#block div.active { display: block;} 
	div#block div.none { display: none;}
	ul li.active a{ background: #993;border-width: 1px 1px 0 0; padding-bottom: 11px; color: #fff;}

</style>

</head>

<body>
	<div class="wrap">

	<ul id="menu">
		<li class="active"><a href="#" onclick="test(0); return false;">Overview</a></li>
		<li><a href="#" onclick="test(1); return false;">Requirements</a></li>
		<li><a href="#" onclick="test(2); return false;">Step By Step</a></li>
		<li><a href="#" onclick="test(3); return false;">Notes</a></li>
	</ul>

	<div id="block">
		<div>Content 1</div>
		<div>Content 2</div>
		<div>Content 3</div>
		<div>Content 4</div>
	</div>

	</div>
<script>
	var block = document.getElementById('block')// Тут мы создали переменную и присвоили ей ссылку на наш блок с контейнерами.
	var blockDiv = block.getElementsByTagName('div')//Тут мы создали переменную и присвоили ей ссылку на коллекцию дивов в нашем блоке контейнере
	for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'// тут мы сделали цикл и прошлись по нашией коллекции дивов и присвоили каждому класс 'none', чтобы все они были скрытые, так как в последствии мы сделаем активным именно наш, который нам нужен.
	blockDiv.item(0).className = 'active' // Тут я сделал активным ииенно первый див из нашей коллекции,для того, чтобы хотябы один был всегда активен, если что.
	function test(number){ // это мы создали функцию и передали ей параметр,число, которое находтится в онклике нашей ссылки, сверху.
		var menu = document.getElementById('menu') // Это короче переменная, которой мы присвоили ссылку на наше меню
		var li = menu.getElementsByTagName('li') // Это коллекция ЛИ в нашем меню

		var block = document.getElementById('block') // Это короче тоже самое, наш блок и ниже его коллекция дивов, правда мы это уже делали, потом разберёмся что к чему.
		var blockDiv = block.getElementsByTagName('div')

		for(var i = 0; i<li.length;i++) li.item(i).className = '' // Тут мы пробежались циклом по нашей коллекции ЛИ в меню и обнулии всем классы, чтобы они все были видны.
		for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none' // Тут вырубили все дивы в контейнере, чтобы потом врубить нужный.

		li.item(number).className = 'active' //  А вот тут мы уже делаем активным именно наш нажатый ЛИ
		blockDiv.item(number).className = 'active' // А вот тут делаем активным именно тот див в контейнере, который соответствует вкладке меню. Вычеслили мы его по числу , индексу, blockDiv.item(number)

	}

</script>
</body>
</html>

Yahoo! · February 14, 2010

Большое спасибо, пошёл разбираться что к чему =)

psywalker · February 14, 2010

Большое спасибо, пошёл разбираться что к чему =)

Давай, тока вкури основательно всё, чтобы лишних вопросов не возникало.

MehOlOLBuC · February 14, 2010

использую jQuery idTabs

psywalker · February 14, 2010

использую jQuery idTabs

Да, интересная штука, жаль только, что я в ней не смыслю ничерта.

MehOlOLBuC · February 14, 2010

Да, интересная штука, жаль только, что я в ней не смыслю ничерта.

ничего сложного. на оф. сайте есть полная инструкция.

psywalker · February 14, 2010

ничего сложного. на оф. сайте есть полная инструкция.

Это неинтересно, интересно сделать самому.

Yahoo! · February 15, 2010

psywolker, я всё ж не понял, если я добавил в содержание каждой вкладки добавил заголовок h2 и хочу что б при скриптах он не показывался, то:

CSS:

.tabTitle {display: block}

JS:

var tabTitle =  block.getElementsByTagName('h2')
for(var k = 0; k<tabTitle.length;k++) tabTitle.item(k).className = 'none'

не работает, хотя делал вроде так же, как ты в своём примере с дивами.

psywalker · February 15, 2010

psywolker, я всё ж не понял, если я добавил в содержание каждой вкладки добавил заголовок h2 и хочу что б при скриптах он не показывался, то:
CSS:
.tabTitle {display: block}
JS:
var tabTitle =  block.getElementsByTagName('h2')
for(var k = 0; k<tabTitle.length;k++) tabTitle.item(k).className = 'none'
не работает, хотя делал вроде так же, как ты в своём примере с дивами.

Это ты какую то хрень пишешь.

var tabTitle = block.getElementsByTagName('h2') - У тебя заголовки в блоке лежат? А где переменная, которая ссылается на блок? И вообще давай мне полный код, всей страницы и что ты хочешь сделать?

Yahoo! · February 15, 2010

Я взял твой пример, дописал в каждую вкладку по заголовку в начале (h3) с классом tabTitle

и в скрипт добавил (подправил)

	var tabTitle = document.getElementById('tabTitle')
	for(var i = 0; i < tabTitle.length; i++) tabTitle.item(i).className = 'none'

s0rr0w · February 15, 2010

Я взял твой пример, дописал в каждую вкладку по заголовку в начале (h3) с классом tabTitle
и в скрипт добавил (подправил)
	var tabTitle = document.getElementById('tabTitle')
	for(var i = 0; i < tabTitle.length; i++) tabTitle.item(i).className = 'none'

getElementById расшифровывается как "получить элемент по id"

psywalker · February 16, 2010

Я взял твой пример, дописал в каждую вкладку по заголовку в начале (h3) с классом tabTitle
и в скрипт добавил (подправил)
	var tabTitle = document.getElementById('tabTitle')
	for(var i = 0; i < tabTitle.length; i++) tabTitle.item(i).className = 'none'

Это неправильно совершенно, ты же ищешь элемент именно по Айди, а их не может быть больше одного на странице.

Yahoo! · February 17, 2010

getElementsByName или getElementsByClassName не помогают (

Sign In

Умные вкладки

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Important Information