Табове на JavaScript
Сега ще реализираме табове. Веднага вижте пример за това, което се изисква от вас:
Проучете и markup-а, върху който ще решаваме задачата:
<div id="parent">
<div class="menu">
<a href="" class="active">таб 1</a>
<a href="">таб 2</a>
<a href="">таб 3</a>
</div>
<div class="tabs">
<div class="tab active">
текст на таб 1
</div>
<div class="tab">
текст на таб 2
</div>
<div class="tab">
текст на таб 3
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
Обърнете внимание на това, че активната връзка
и активният таб имат клас active.
Обсъждане
Нека сега обсъдим как да решим тази задача. Очевидно е, че трябва по някакъв начин да свържем връзките със съответстващите им табове. В този урок от теоретичния учебник вече разгледахме възможните варианти.
В този случай предлагам да свържа връзките и табовете просто по позиция: първата връзка ще отваря първия таб, втората връзка - втория таб и така нататък.
Общият алгоритъм ще изглежда така: при натискане на бутон трябва да намерим връзката с класа и да й премахнем този клас. По същия начин трябва да намерим таба с този клас и също да му премахнем този клас.
След това трябва да вземем връзката, върху която е бил кликнат и да я активираме. След това трябва да вземем таба, който има същия номер, като нашата връзка - и също да го активираме.
Копирайте си дадените HTML и CSS кодове. Реализирайте табове според описания алгоритъм.
