Укладкі на JavaScript

Зараз мы рэалізуем укладкі. Адразу паглядзіце на ўзор таго, што ад вас патрабуецца:

Вывучыце таксама верстку, на якой мы будзем вырашаць задачу:

html<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>

css#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.

Абмеркаванне

Давайце зараз абмеркуем тое, як вырашаць гэтую задачу. Відавоўна, што трэба як-то звязаць спасылкі з адпаведнымі ім укладкамі. У даным ўроку з тэарэтычнага падручніка мы ўжо разбіралі магчымыя варыянты.

У даным выпадку я прапаную звязаць спасылкі і ўкладкі проста па пазіцыі: першая спасылка будзе адкрываць першую ўкладку, другая спасылка - другую ўкладку і гэтак далей.

Агульны алгарытм будзе выглядаць так: па націску на кнопку мы павінны знайсці спасылку з класам і забраць ёй гэты клас. Аналагічным чынам мы павінны знайсці ўкладку з гэтым класам і таксама забраць ёй гэты клас.

Затым мы павінны ўзяць спасылку, на якую быў клік і актываваць яе. Затым мы павінны ўзяць укладку, якая мае такі ж нумар, як і наша спасылка - і таксама актываваць яе.