কিভাবে তৈরি করা: বন্ধযোগ্য তালিকাবস্তু

জেইএস কিভাবে তালিকাবস্তু বন্ধ করবেন জানুন。

কিভাবে বন্ধযোগ্য তালিকাবস্তু তৈরি করবেন

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

<ul>
  <li>এডেল</li>
  <li>অগনেস<span class="close">x</span></li>
  <li>বিলি<span class="close">x</span></li>
  <li>বব<span class="close">x</span></li>
  <li>Calvin<span class="close">x</span></li>
  <li>Christina<span class="close">x</span></li>
  <li>Cindy</li>
</ul>

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

* {
  box-sizing: border-box;
}
/* তালিকার শৈলী সংজ্ঞায়ন (বাহ্যিক মার্গ এবং বিষয় সূচক সরানো) */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* তালিকাভুক্ত বিষয়ের শৈলী সংজ্ঞায়ন */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* দ্বিপাশীয় ফার্মওয়ার প্রতিরোধ করা */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}
/* মাউস হট করার সময় কমল রঙের পিছনভূমি যোগ করা */
ul li:hover {
  background-color: #eee;
}
/* বন্ধনী বাটনের শৈলী সংজ্ঞায়ন (span) */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}

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

// class="close" এর সমস্ত ইলেকট্রন পাওয়া
var closebtns = document.getElementsByClassName("close");
var i;
// সমস্ত ইলেকট্রনেট প্রবেশ করা এবং ক্লিক করার সময় পিতৃতত্ত্বকে লুকানো
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

亲自试一试