-->

Notification


×

Iklan

Iklan

Cara Membuat Kode HTML Button Close List Items

Tayang: Selasa, 30 Agustus 2022 | 21.20 WIB
Tayangan Last Updated 2022-08-30T19:40:44Z

Pages/Halaman:
Dapatkan berita terupdate dari SAFAHAD.MY.ID di:
SAFAHAD - Contoh Button Close List Items. Klik simbol "x" di sebelah kanan item daftar untuk menutup/menyembunyikannya
Tangkapan Layar
SAFAHAD - Contoh Button Close List Items. Klik simbol "x" di sebelah kanan item daftar untuk menutup/menyembunyikannya. Untuk contoh, Klik Demo

Cara Membuat Item Daftar yang Dapat Ditutup
Langkah 1, Tambahkan HTML:
<ul id="myULclose">
<li><a href="javascript:void(0)">Adele</a></li>
<li><a href="javascript:void(0)">Agnes<span class="closeulb">&times;</span></a></li>
<li><a href="javascript:void(0)">Billy<span class="closeulb">&times;</span></a></li>
<li><a href="javascript:void(0)">Bob<span class="closeulb">&times;</span></a></li>
<li><a href="javascript:void(0)">Calvin<span class="closeulb">&times;</span></a></li>
<li><a href="javascript:void(0)">Christina<span class="closeulb">&times;</span></a></li>
<li><a href="javascript:void(0)">Cindy</a></li>
</ul>

Langkah 2, Tambahkan CSS:
<style>
#myULclose {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myULclose li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 17px;
  color: black;
  display: block;
  position: relative;
}
#myULclose li a:hover:not(.header) {
  background-color: #eee;
}
#myULclose .closeulb {position: absolute;
    top: 50%;
    right: 0%;padding:12px 16px;
    transform: translate(0%,-50%);}
    .closeulb:hover {background:#bbb}
</style>

Selanjutnya, Langkah 3 Tambahkan JavaScript...
Langkah 3, Tambahkan JavaScript:
<script>
var closeULbtns = document.getElementsByClassName("closeulb");
var i;
for (i = 0; i < closeULbtns.length; i++) {
    closeULbtns[i].addEventListener("click", function() {
        this.parentElement.style.display='none';
    });
}
</script>

Lihat Artikel Seputar Blog Lainnya DISINI
Kontributor: Abdul Hamid
Sumber: w3schools
Lihat Juga
Lihat Juga
dCrHb44.jpg Lihat Juga
Lihat Juga
Lihat Juga

×
Latest Update Update
CLOSE Ads