বর্তমান উপাদানকে 'active' শ্রেণী যোগ করা কিভাবে:

সক্রিয় ইলেকট্রন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

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

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* বাটনের স্টাইল সংজ্ঞায়িত করুন */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* active শ্রেণী (এবং মাউস হভার বাটন) এর স্টাইল সংজ্ঞায়িত করুন */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

তৃতীয় পদক্ষেপ - জাভাস্ক্রিপ্ট যোগ করুন:

// কন্টেন্টার ইলেকট্রনটি পাওয়া নায়
var btnContainer = document.getElementById("myDIV");
// কন্টেন্টারের ভিতরের সকল class="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";
  });
}

亲自试一试

যদি button ইলেকট্রনটি প্রথম থেকে active শ্রেণী সংজ্ঞায়িত না হয়, তবে নিচের কোডটি ব্যবহার করুন:

// কন্টেন্টার ইলেকট্রনটি পাওয়া নায়
var btnContainer = document.getElementById("myDIV");
// কন্টেন্টারের ভিতরের সকল class="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", "");
    }
    // সক্রিয় শ্রেণীটি বর্তমান/ক্লিক করা বাটনে যোগ করুন
    this.className += " active";
  });
}

亲自试一试