ဖြစ်သည့်အဆင်းတိုင်းအဆင်းခွဲ အသုံးပြုခြင်း ဘယ်လိုဖြစ်သလဲ:

လူ့ကျင်း အရာ

ပထမ အဆင့် - HTML ပေးပါ:

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

ဒုတိယ အဆင့် - CSS ပေးပါ:

/* ဘက်ဆက်တင်လက် အော်ဒီယို ပြုပြင်ပါ */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* အကြိုးစား 'active' အကြိုးစား (နှင့် ကြားနေချိန်အတွင်း ဘက်ဆက်တင်လက်) အော်ဒီယို ပြုပြင်ပါ */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

တတိယ အဆင့် - JavaScript ပေးပါ:

// ဘက်ဆက်တင်လက် အရာဝတ္တု ကို ရယူပါ
var btnContainer = document.getElementById("myDIV");
// အကြိုးစား 'btn' အကြိုးစား ပါဝင်သော ဘက်ဆက်တင်လက်များ ကို ရယူပါ
var btns = btnContainer.getElementsByClassName("btn");
// ဘက်ဆက်တင်လက်များ ကို ခွဲခြား ပြီး 'active' အကြိုးစား ပေးပါ
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

亲自试一试

အက်ယ်ပုံ အကြိုးစား 'active' အကြိုးစား မရှိဘဲ ဖြစ်လာခဲ့ လျှင် အောက်ပါ ကြောင်းကို အသုံးပြုပါ:

// ဘက်ဆက်တင်လက် အရာဝတ္တု ကို ရယူပါ
var btnContainer = document.getElementById("myDIV");
// အကြိုးစား 'btn' အကြိုးစား ပါဝင်သော ဘက်ဆက်တင်လက်များ ကို ရယူပါ
var btns = btnContainer.getElementsByClassName("btn");
// ဘက်ဆက်တင်လက်များ ကို ခွဲခြား ပြီး 'active' အကြိုးစား ပေးပါ
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // အကြိုးစား 'active' အကြိုးစား မရှိဘဲ
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // ယခု/ဖြတ်တောက်ခဲ့သော ဘက်ဆက်တင်လက် သို့ 'active' အကြိုးစား ပေးပါ
    this.className += " active";
  });
}

亲自试一试