Вкладки/табы на CSS
Вкладки/табы на CSS с помощью input-ов и псевдокласса :checked
Javascript
Javascript — ужас и кошмар любого вменяемого разработчика, на фоне которого PHP выглядит, мать его, Haskell-ем. Несмотря на отсутствие нормальной структурированности и откровенные пр*ебы в базовой архитектуре, горячо любим нублом за предельно низкий даже среди ближайших конкурентов порог вхождения, а также работодателями, готовыми взять на фирму д*лб*ёба с двухмесячным стажем, который быстро-решительно наваяет им относительно рабочую, но при этом абсолютно неподдерживаемую систему без всякой перспективы к дальнейшему развитию. О том, насколько javascript на самом деле плох, красноречиво говорит количество псевдоязыков, код которых может в него транслироваться.
PHP
PHP — почва для самореализации каждого начинающего веб-девелопера, благодаря чему этот язык здесь и находится. Обладает минимальным порогом входа (и выхода). На нем написана куча этих ваших CMS, включая популярные drupal, joomla, wordpress и нашу уютненькую mediawiki — которая, впрочем, будет скоро выпилена Новым Движком™ на расовом erlang.
Python
Python — идеальный язык для обучения программированию школоты, так как даже обезьяна осилит. Да что уж там обезьяна, даже 1Сник или похапэшник не облажается. Тем не менее, на нём иногда пишут и серьёзные вещи. Огромный плюс языка — синтаксис, всячески ограничивающий говнокодера в вымещении своих влажных фантазий в файл со скриптом в необработанном виде. В результате даже ОЧЕНЬ ПЛОХО написанный код таки поддаётся синтаксическому разбору среднестатистическим программистом. Ещё одно непревзойдённое достоинство языка и компиляторов для него — феерическая скорость работы программ, что позволяет даже самому бездарному учащемуся для простейших вычислений заранее получать результат, вычисленный столбиком до окончания работы программы.
Ruby
Ruby — тот же Python, только с принудительным ООП и парой-тройкой дополнительных свистоперделок. В своё время взлетел исключительно благодаря рельсам и, собственно, сейчас без них никому не упал. Породил целый пласт веб-разработчиков, мнящих себя (абсолютно безосновательно) илитой среди программистов и считающих (опять-таки безосновательно), что раз илита, то всё позволено и можно хоть в одну строчку программу запихать (в Python'е, к слову, подобный функционал был благоразумно отключён).
<div class="css-tabs-wrapper">
<!-- Первая вкладка -->
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">Javascript</label>
<!-- Вторая вкладка -->
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">PHP</label>
<!-- Третья вкладка -->
<input type="radio" name="tabs" id="tab-nav-3">
<label for="tab-nav-3">Python</label>
<!-- Четвертая вкладка -->
<input type="radio" name="tabs" id="tab-nav-4">
<label for="tab-nav-4">Ruby</label>
<div class="tabs">
<div>
<h3>Javascript</h3>
<p>Javascript — ужас и кошмар...</p>
</div>
<div>
<h3>PHP</h3>
<p>PHP — почва для самореализации...</p>
</div>
<div>
<h3>Python</h3>
<p>Python — идеальный язык...</p>
</div>
<div>
<h3>Ruby</h3>
<p>Ruby — тот же Python...</p>
</div>
</div>
</div>.css-tabs-wrapper {
max-width: 700px;
margin: 50px auto 20px;
}
.css-tabs-wrapper > input {
display: none;
}
.css-tabs-wrapper > label {
display: block;
float: left;
padding: 10px 20px;
margin-right: 5px;
cursor: pointer;
transition: all .25s ease-in-out;
}
.css-tabs-wrapper > label:hover,
.css-tabs-wrapper > input:checked + label {
background: #4a9998;
color: #fff;
}
.tabs {
clear: both;
min-height: 350px;
perspective: 600px;
}
.tabs > div {
position: absolute;
opacity: 0;
max-width: 700px;
border: 2px solid #4a9998;
padding: 10px 30px 40px;
transform: rotateX(-25deg);
transform-origin: top center;
transition: opacity .3s ease-in-out, transform 1s;
}
#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4){
opacity: 1;
z-index: 1;
transform: rotateX(0deg);
}
@media only screen and (max-width : 992px) {
.tabs {
min-height: 420px;
}
}
@media only screen and (max-width : 768px) {
.tabs {
min-height: auto;
}
.css-tabs-wrapper > label {
display: none;
}
.tabs > div {
border: none;
padding-bottom: 5px;
opacity: 1;
position: static;
transform: none;
}
}Материалы по теме:
Вкладки на CSS
Sorax. Уроки веб-разработки