Tabs (табы) вкладки на CSS

Чтобы организовать контент на странице сайта в виде вкладок (еще называют «табы») можно использовать нижеприведенный код:

HTML CSS Вкладка 3

<div class="tabs">
<input type="radio" name="name1" checked id="htmltab">
<label for="htmltab">Вкладка 1</label>
<input type="radio" name="name1" id="csstab">
<label for="csstab">Вкладка 2</label>
<input type="radio" name="name1" id="tab3">
<label for="tab3">Вкладка 3</label>
<div>Контент для первой вкладки (для вкладки "HTML")</div>
<div>Контент для второй вкладки (для вкладки "CSS")</div>
<div>Контент для третей вкладки (для вкладки "Вкладка 3" - Контент третей вкладки...)</div>
                        </div>
                        <div class="crayon-main" style="">
                          <table class="crayon-table">
                            <tr class="crayon-row">
                              <td class="crayon-nums" data-settings="show">
                                <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-1">
                                    1
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-2">
                                    2
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-3">
                                    3
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-4">
                                    4
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-5">
                                    5
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-6">
                                    6
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-7">
                                    7
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-8">
                                    8
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-9">
                                    9
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-10">
                                    10
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-11">
                                    11
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-12">
                                    12
                                  </div>
                                  <div class="crayon-num" data-line="crayon-617791d544dd8029402611-13">
                                    13
                                  </div>
                                  <div class="crayon-num crayon-striped-num" data-line="crayon-617791d544dd8029402611-14">
                                    14
                                  </div>
                                </div>
                              </td>
                              <td class="crayon-code">
                                <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-1">
                                     
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-2">
                                     
                                  </div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-3">
                                    <span class="crayon-r"><div> <span class="crayon-e">class</span>=<span class="crayon-s">"tabs"</span><span class="crayon-r">></span>
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-4">
                                    <span class="crayon-r"><input> <span class="crayon-e">type</span>=<span class="crayon-s">"radio"</span> <span class="crayon-h"></span><span class="crayon-e">name</span>=<span class="crayon-s">"name1"</span> <span class="crayon-h"></span><span class="crayon-e">checked</span>=<span class="crayon-s">"checked"</span> <span class="crayon-h"></span><span class="crayon-e">id</span>=<span class="crayon-s">"htmltab"</span><span class="crayon-r">></span>
                                  </span>
</div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-5">
                                    <span class="crayon-r"><label> <span class="crayon-e">for</span>=<span class="crayon-s">"htmltab"</span><span class="crayon-r">></span><span class="crayon-i">Вкладка 1</span><span class="crayon-r"></span></label></span>
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-6">
                                    <span class="crayon-r"><input> <span class="crayon-e">type</span>=<span class="crayon-s">"radio"</span> <span class="crayon-h"></span><span class="crayon-e">name</span>=<span class="crayon-s">"name1"</span> <span class="crayon-h"></span><span class="crayon-e">id</span>=<span class="crayon-s">"csstab"</span><span class="crayon-r">></span>
                                  </span>
</div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-7">
                                    <span class="crayon-r"><label> <span class="crayon-e">for</span>=<span class="crayon-s">"csstab"</span><span class="crayon-r">></span><span class="crayon-i">Вкладка 2</span><span class="crayon-r"></span></label></span>
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-8">
                                    <span class="crayon-r"><input> <span class="crayon-e">type</span>=<span class="crayon-s">"radio"</span> <span class="crayon-h"></span><span class="crayon-e">name</span>=<span class="crayon-s">"name1"</span> <span class="crayon-h"></span><span class="crayon-e">id</span>=<span class="crayon-s">"tab3"</span><span class="crayon-r">></span>
                                  </span>
</div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-9">
                                    <span class="crayon-r"><label> <span class="crayon-e">for</span>=<span class="crayon-s">"tab3"</span><span class="crayon-r">></span><span class="crayon-i">Вкладка 3</span><span class="crayon-r"></span></label></span>
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-10">
                                    <span class="crayon-r"><div>
<span class="crayon-i">Контент для первой вкладки (для вкладки "HTML")</span><span class="crayon-r"></span>
</div></span>
                                  </div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-11">
                                    <span class="crayon-r"><div>
<span class="crayon-i">Контент для второй вкладки (для вкладки "CSS")</span><span class="crayon-r"></span>
</div></span>
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-12">
                                    <span class="crayon-r"><div>
<span class="crayon-i">Контент для третей вкладки (для вкладки "Вкладка 3" - Контент третей вкладки...)</span><span class="crayon-r"></span>
</div></span>
                                  </div>
                                  <div class="crayon-line" id="crayon-617791d544dd8029402611-13">
                                     
                                  </div>
                                  <div class="crayon-line crayon-striped-line" id="crayon-617791d544dd8029402611-14">
                                     
                                  </div>
                                </span>
</div>
                              </div>
</td>
                            </tr>
                          </table>
                        </div>

<style>
.tabs > div, .tabs > input {display: none}

.tabs label {padding: 5px; border: 1px solid #d33; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff}
.tabs input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }

.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; padding: 5px; border: 1px solid #d33}
</style>

.tabs > div, .tabs > input {display: none}

.tabs label {padding: 5px; border: 1px solid #d33; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff}

.tabs input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }

.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; padding: 5px; border: 1px solid #d33}

Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки.

При добавлении или уменьшении количества вкладок нужно учесть, что нужно добавлять/убирать новые пары тега div и в стилях добавлять/убирать строки свойств «.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(n)».

CSS Frontend HTML WordPress Верстка