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

Author Роман Чернышов    Category JavaScript / jQuery     Tags , , , Комментариев 2 Дата 9 Окт

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

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

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

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

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

<style media="screen,projection" type="text/css">
#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;
}
</style>

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

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

  • Чех 28.04.2011 в 2:11 пп

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

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

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

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...