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

Author Автор: Роман Чернышов    Опубликовано: 9 октября 2010

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

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

Один из методов создания табов, с использованием языка 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 будет выглядеть следующим образом:

<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, предварительно можно заменив размер, шрифт и фон наших вкладок:

#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;
}

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

  • Чех 28.04.2011 в 2:11 пп

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

  • Роман Чернышов 28.04.2011 в 2:42 пп

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

Оставить комментарий

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка