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

css табы, tabbs, вкладки, табы Комментариев 2 Дата 9 Окт

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

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

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

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

&lt;script type="text/javascript"&gt;
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&lt;names.length;i++) {
document.getElementById(names[i]).className = 'nonactive';
}
for(i=0;i&lt;conts.length;i++) {
document.getElementById(conts[i]).className = 'hide';
}
document.getElementById('tabname_' + id).className = 'active';
document.getElementById('tabcontent_' + id).className = 'show';
}
&lt;/script&gt;

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

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

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

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

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

&lt;style media="screen,projection" type="text/css"&gt;
#tabbs {
 position:relative;
 padding:20px; margin:0 auto;
 background-color:#fff;
/*    border-top:#00f 0px solid;*/
 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;
}
&lt;/style&gt;

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

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

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

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