Удобные Вкладки-Табы с использованием 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”
Оставить комментарий
- Перенести ли домены с Рег.ру на Бегет? спросил (а) Виктор
- RuCaptcha bot и бан по IP спросил (а) Родмик
- MySQL запрос с несколькими JOIN спросил (а) Александр
- MySQL выбрать данные из двух таблиц спросил (а) Виталий
- Редирект при переносе сайта на WordPress спросил (а) Николай
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- PHP: распознать цифры, буквы с картинки к записи
- Анализ рынка Совместных покупок к записи
- Переустановка Apache к записи
- Интеграция сайта со СДЭК по API к записи
Archive
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (37)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Март 2016 (1)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (42)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (8)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Регистрация программы для ЭВМ или базы данных в Роспатенте 27.12.2020
- Парсер для форума XenForo 22.12.2020
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей 18.12.2020
- PHP скрипт для проведения акций с призами на сайте(автоматизированный маркетинг) 16.12.2020
- Скрипт калькулятора емкости HDD для видеонаблюдения 03.12.2020


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