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 դասը։

Քննարկում

Այժմ եկեք քննարկենք, թե ինչպես լուծել այս խնդիրը։ Ակնհայտ է, որ պետք է ինչ-որ կերպ կապել հղումները դրանց համապատասխան ներդիրների հետ։ Տեսական դասագրքի այս դասում մենք արդեն վերլուծել ենք հնարավոր տարբերակները։

Այս դեպքում ես առաջարկում եմ հղումները և ներդիրները կապել պարզապես դիրքով․ առաջին հղումը կբացի առաջին ներդիրը, երկրորդ հղումը ՝ երկրորդ ներդիրը և այդպես շարունակ։

Ընդհանուր ալգորիթմը կունենա հետևյալ տեսքը․ սեղմելու դեպքում կոճակի վրա մենք պետք է գտնենք active դասով հղումը և հանենք այդ դասը։ Նույն կերպ մենք պետք է գտնենք այդ դասով ներդիրը և նույնպես հանենք դասը։

Այնուհետև մենք պետք է վերցնենք այն հղումը, որի վրա կատարվել է կլիկը և ակտիվացնենք այն։ Ապա մենք պետք է վերցնենք ներդիրը, որն ունի նույն համարը, ինչ մեր հղումը, և նույնպես ակտիվացնենք այն։