@willie_grady
Есть несколько способов создания вкладок в HTML. Рассмотрим два из них:
HTML код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'Tab1')">Вкладка 1</button> <button class="tablinks" onclick="openTab(event, 'Tab2')">Вкладка 2</button> <button class="tablinks" onclick="openTab(event, 'Tab3')">Вкладка 3</button> </div> <div class="tabcontent" id="Tab1"> <h3>Содержимое вкладки 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="tabcontent" id="Tab2"> <h3>Содержимое вкладки 2</h3> <p>Ut sodales velit id mi fringilla bibendum.</p> </div> <div class="tabcontent" id="Tab3"> <h3>Содержимое вкладки 3</h3> <p>Nullam sed lorem vitae augue hendrerit vestibulum.</p> </div> |
CSS код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .tabcontent.active { display: block; } |
JavaScript код:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("active"); } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } document.getElementById(tabName).classList.add("active"); evt.currentTarget.classList.add("active"); } |
HTML код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="tabs"> <input type="radio" name="tab" id="tab1" checked> <label for="tab1">Вкладка 1</label> <input type="radio" name="tab" id="tab2"> <label for="tab2">Вкладка 2</label> <input type="radio" name="tab" id="tab3"> <label for="tab3">Вкладка 3</label> <div class="tab-content"> <h3>Содержимое вкладки 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="tab-content"> <h3>Содержимое вкладки 2</h3> <p>Ut sodales velit id mi fringilla bibendum.</p> </div> <div class="tab-content"> <h3>Содержимое вкладки 3</h3> <p>Nullam sed lorem vitae augue hendrerit vestibulum.</p> </div> </div> |
CSS код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.tabs { max-width: 800px; margin: 0 auto; } .tabs label { display: inline-block; margin: 0 10px; padding: 10px; border-radius: 5px; font-weight: bold; cursor: pointer; } .tabs input[type="radio"] { display: none; } .tabs input[type="radio"]:checked + label { background-color: #ccc; } .tab-content { display: none; padding: 10px; border: 1px solid #ccc; margin: 10px; border-radius: 5px; } .tabs input[type="radio"]:checked ~ .tab-content { display: block; } |