JavaScript တွင် တက်ဘ်များ

ယခု ကျွန်ုပ်တို့သည် တက်ဘ်များကို အကောင်အထည်ဖော်ပါမည်။ လုပ်ဆောင်ရမည့်အရာ၏ နမူနာကို ချက်ချင်းကြည့်ပါ။

ကျွန်ုပ်တို့ ပြဿနာကို ဖြေရှင်းမည့် markup ကိုလည်း လေ့လာပါ။

html<div id="parent">
  <div class="menu">
    <a href="" class="active">တက်ဘ် ၁</a>
    <a href="">တက်ဘ် ၂</a>
    <a href="">တက်ဘ် ၃</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      တက်ဘ် ၁ ရှိ စာသား
    </div>
    <div class="tab">
      တက်ဘ် ၂ ရှိ စာသား
    </div>
    <div class="tab">
      တက်ဘ် ၃ ရှိ စာသား
    </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 class ရှိကြောင်း သတိပြုပါ။

ဆွေးနွေးခြင်း

ယခု ဤပြဿနာကို မည်သို့ဖြေရှင်းရမည်ကို ဆွေးနွေးကြပါစို့။ လင့်ခ်များကို ၎င်းတို့နှင့် သက်ဆိုင်ရာ တက်ဘ်များနှင့် မည်သို့ချိတ်ဆက်ရမည်ကို ရှင်းရှင်းလင်းလင်း သိရပါမည်။ ဤကိစ္စတွင် ကျွန်ုပ်သည် လင့်ခ်များနှင့် တက်ဘ်များကို ရိုးရိုးလေးပဲ အနေအထားအလိုက် ချိတ်ဆက်ရန် အကြံပြုပါသည်။ ပထမလင့်ခ်သည် ပထမတက်ဘ်ကို ဖွင့်ပါမည်၊ ဒုတိယလင့်ခ်သည် ဒုတိယတက်ဘ်ကို ဖွင့်ပါမည်၊ စသဖြင့် ဖြစ်ပါသည်။

ယေဘူယျ algorithm သည် ဤသို့ဖြစ်လိမ့်မည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ class ပါသော လင့်ခ်ကို ရှာပြီး ၎င်းမှ ထို class ကို ဖယ်ရှားရပါမည်။ အလားတူပင် ထို class ပါသော တက်ဘ်ကို ရှာပြီး ၎င်းမှလည်း ထို class ကို ဖယ်ရှားရပါမည်။

ထို့နောက် ကလစ်နှိပ်လိုက်သော လင့်ခ်ကို ယူပြီး ၎င်းကို တက်ကြွအောင်လုပ်ရပါမည်။ ထို့နောက် ကျွန်ုပ်တို့၏ လင့်ခ်နှင့် အမှတ်စဉ်တူသော တက်ဘ်ကို ယူပြီး ၎င်းကိုလည်း တက်ကြွအောင်လုပ်ရပါမည်။