табы на css

[Dark Angell]

собственно интересуют вкладки переключения на css,для сокращения места на сайте,у меня есть скрипт который делит на 3-и вкладки,но при добавлении ещё одного такого же он отказываеться работать,так как первый скрипт не даёт ему исполняться и берёт функции переключения на себя,переменные менял полностью для вствки,но не помогло,вот скрин того что мне нужно:

​

главное чтобы можно было использовать до 10 таких табов,и желательно под двиг dle

 

[allximik]

собственно интересуют вкладки переключения на css

Может лучше использовать для этих целей ajax?
Например

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

и тут тоже есть

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Dark Angell]

не проканывает,увеличивает скорость страницы на загрузку к общей массе страницы на 0.08,общая скорость 0.25

 

[mdss]

вот без скриптов пример

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Описание тут

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[funest]

Как вариант:
Стили

#container{
	width:900px;
	height:400px;
	background: #00CCFF;
	padding:10px;
	margin:0 auto;
}
#links{
	width:100%;
	background:#CCCC00;
}
.tab{
	width:100px;
	float:left;
	margin:10px;
	text-align:center;
}
#content{
	width:100%;
	position:relative;
}
.con{
	width:880px;
	height:300px;
	padding:10px;
	position:absolute;
	color:#fff;
}
#one{
	background:#3333CC;
	z-index:1;
}
#two, #three, #four, #five{
	z-index:0;
}
#two {
	background:#00FFCC;
}
#three{
	background:#99FF66;
}
#four{
	background:#FF9966;
}
#five{
	background:#FFFFFF;
}

js

<script type="text/javascript">
	function clickTab(id){
		document.getElementById('one').style.zIndex=0;
		document.getElementById('two').style.zIndex=0;
		document.getElementById('three').style.zIndex=0;
		document.getElementById('four').style.zIndex=0;
		document.getElementById('five').style.zIndex=0;
		document.getElementById(id).style.zIndex=1;
	}
</script>

дивы

<div id="container">
	<div id="tabs">
    	<div id="links">
        	<div class="tab"><a href="#" onclick="clickTab('one')">Вкладка 1</a></div>
            <div class="tab"><a href="#" onclick="clickTab('two')">Вкладка 2</a></div>
            <div class="tab"><a href="#" onclick="clickTab('three')">Вкладка 3</a></div>
            <div class="tab"><a href="#" onclick="clickTab('four')">Вкладка 4</a></div>
            <div class="tab"><a href="#" onclick="clickTab('five')">Вкладка 5</a></div>
        </div>
        <div id="content">
        	<div class="con" id="one">Контент 1</div>
            <div class="con" id="two">Контент 2</div>
            <div class="con" id="three">Контент 3</div>
            <div class="con" id="four">Контент 4</div>
            <div class="con" id="five">Контент 5</div>
        </div>
    </div>
</div>

Простенько все, с оформлением я особо не заморачивался. Если не совсем понятно что за что отвечает - могу прокомментировать.

 

[Jameson]

вот без скриптов пример
*** скрытое содержание ***
Описание тут
*** скрытое содержание ***

Забавно, но в Опере (9.64@XP) не работает.

 

[xDina]

ну собственно эту штуку можно было из шаба britneyzone.ru выдернуть

 

[StrangeCat]

покажите исходный скрипт плз

 

[funest]

Вообще-то очень много вариантов сделать вкладки при помощи различных скриптов:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Но для меня лично проще написать нечто подобное типо того, что я писал выше.

 

[Jameson]

ну собственно эту штуку можно было из шаба britneyzone.ru выдернуть

Ах, чорт, и правда! Каждый день там зависаем же, как не заметили!?!

p.s. Кстати, открыл это (ваше?) творение... и где там табы на CSS без скриптов, которые тут обсуждаются? Где там вообще табы?