Удобные Вкладки-Табы с использованием CSS и JS

Для экономии места в видимой части сайта или же просто для повышения привлекательности, удобно применять такое решение как вкладки, или же как их принято называть — табы(tabs). Встретить их сейчас можно абсолютно везде, вебмастера отдавая дань моде, вставляют их везде и повсюду(порой на странице можно встретить 3-5 таких блоков).

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

Один из методов создания табов, с использованием языка JavaScript, код скрипта будет выглядеть так:

Просмотр кода JAVASCRIPT

function showtab(id){
names = new Array ("tabname_1","tabname_2","tabname_3","tabname_4"); //массив id заголовков табов
conts= new Array ("tabcontent_1","tabcontent_2","tabcontent_3","tabcontent_4"); //массив id табов
for(i=0;i<names.length;i++) {
document.getElementById(names[i]).className = 'nonactive';
}
for(i=0;<conts.length;i++) {
document.getElementById(conts[i]).className = 'hide';
}
document.getElementById('tabname_' + id).className = 'active';
document.getElementById('tabcontent_' + id).className = 'show';
}

Код HTML будет выглядеть следующим образом:

Просмотр кода HTML

<div id='tabname_1' onclick="showtab('1')" class='active'><u>Вкладка 1</u></div>
<div id='tabname_2' onclick="showtab('2')" class='nonactive'><u>Вкладка 2</u></div>
<div id='tabname_3' onclick="showtab('3')" class='nonactive'><u>Вкладка 3</u></div>
<div id='tabname_4' onclick="showtab('4')" class='nonactive'><u>Вкладка 4</u></div>
 
<div id='tabcontent_1' class='show'>Содержимое вкладки 1</div>
<div id='tabcontent_2' class='hide'>Содержимое вкладки 2</div>
<div id='tabcontent_3' class='hide'>Содержимое вкладки 3</div>
<div id='tabcontent_4' class='hide'>Содержимое вкладки 4</div>

Добавляем CSS, предварительно можно заменив размер, шрифт и фон наших вкладок:

Просмотр кода CSS

#tabbs {
 position:relative;
 padding:20px; margin:0 auto;
 background-color:#fff;
 width: 1006px;
 min-width:1006px;
 height:130px;
}
div{
 font-family:verdana;
 font-size:11px;
}
.content div{
 padding:20px;
 height:50px;
 color:black;
 background-color:#E7EFF5;
}
.hide{ /* скрываем вкладку */
 display:none;
}
.show{ /* показываем вкладку */
 display:block;
 color:red;
}
.nonactive{ /* неактивная вкладка */
 background-color:#fff;
 cursor:pointer;
 color:#3794DA;
}
.active{ /* активная вкладка */
 background-color:#E7EFF5;
 border-top:#C40000 2px solid;
 cursor:default;
 color:#000;
 font: bold 12px Tahoma;
}

Смотреть пример | Скачать пример

JavaScript / jQuery Tags

css табы, tabbs, вкладки, табы

2 комментария to “Удобные Вкладки-Табы с использованием CSS и JS”

Чех 28.04.2011 в 2:11 пп
отличный скрипт, простой и удобный. CSS стилями все подгоняешь под себя, не загружает сильно страницу, сам мало весит и нет ничего лишнего. хотя и пришлось вручную переписывать его заново))))

Ответить
Роман Чернышов 28.04.2011 в 2:42 пп
Да есть такой нехороший момент, как кривое отображение и последующее копирования кода из примера, а именно кавычек. Так что уважаемые пользователи, будьте внимательны, после копирования примера перепроверите все кавычки и при надобности поправьте их.

Ответить