Bagaimana untuk mencipta awan teg dinamik menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk mencipta awan teg dinamik menggunakan HTML, CSS dan jQuery

PHPz

Lepaskan： 2023-10-26 08:34:29

asal

857 orang telah melayarinya

Bagaimana untuk mencipta awan teg dinamik menggunakan HTML, CSS dan jQuery

Cara mencipta awan teg dinamik menggunakan HTML, CSS dan jQuery

Awan teg ialah elemen reka bentuk web biasa Ia sering digunakan untuk memaparkan teg atau kata kunci tapak web supaya pengguna boleh menyemak imbas dan memilih dengan cepat yang diminati. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta awan teg dinamik dan memberikan contoh kod khusus.

Struktur HTML
Pertama, kita perlu mencipta struktur HTML asas untuk memegang awan teg. Biasanya, awan teg dilaksanakan sebagai bekas yang mengandungi berbilang elemen terpaut dengan teg. Berikut ialah contoh kod HTML:

<div class="tag-cloud">
   <a href="#" class="tag">HTML</a>
   <a href="#" class="tag">CSS</a>
   <a href="#" class="tag">JavaScript</a>
   <a href="#" class="tag">jQuery</a>
   <a href="#" class="tag">Web设计</a>
   <a href="#" class="tag">前端开发</a>
   <!-- 添加更多标签 -->
</div>

Salin selepas log masuk

Gaya CSS
Seterusnya, kita perlu menambah gaya CSS untuk teg dan bekas awan teg. Berikut ialah contoh kod CSS:

.tag-cloud {
   text-align: center;
   padding: 10px;
}

.tag {
   display: inline-block;
   padding: 5px 10px;
   margin: 5px;
   background-color: #eee;
   color: #333;
   border-radius: 5px;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

.tag:hover {
   background-color: #ddd;
}

Salin selepas log masuk

Di sini kami menetapkan penjajaran tengah dan padding untuk bekas awan tag. Setiap label menggunakan atribut paparan elemen blok sebaris dan menambah beberapa gaya, seperti pelapik, jidar, warna latar belakang, warna, jidar bulat, dsb.

Kesan Dinamik jQuery
Akhir sekali, kita perlu menggunakan jQuery untuk menambah beberapa kesan dinamik pada awan teg untuk meningkatkan pengalaman pengguna. Berikut ialah contoh kod jQuery:

$(document).ready(function() {
   $('.tag').click(function(e) {
      e.preventDefault();
      $(this).toggleClass('active');
   });
});

Salin selepas log masuk

Di sini kami menggunakan kaedah .ready() jQuery untuk memastikan kod tersebut dilaksanakan selepas dokumen dimuatkan. Kami menambah pengendali acara klik untuk setiap label, menukar kelas aktif pada klik. Dengan cara ini, apabila pengguna mengklik pada tab, gayanya berubah untuk menyerlahkan tab yang dipilih.

Contoh Kod Penuh
Berikut ialah fail HTML lengkap contoh kod keseluruhan:

<!DOCTYPE html>
<html>
<head>
   <title>动态标签云</title>
   <style>
      .tag-cloud {
         text-align: center;
         padding: 10px;
      }

      .tag {
         display: inline-block;
         padding: 5px 10px;
         margin: 5px;
         background-color: #eee;
         color: #333;
         border-radius: 5px;
         text-decoration: none;
         transition: background-color 0.3s ease;
      }

      .tag:hover {
         background-color: #ddd;
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function() {
         $('.tag').click(function(e) {
            e.preventDefault();
            $(this).toggleClass('active');
         });
      });
   </script>
</head>
<body>
   <div class="tag-cloud">
      <a href="#" class="tag">HTML</a>
      <a href="#" class="tag">CSS</a>
      <a href="#" class="tag">JavaScript</a>
      <a href="#" class="tag">jQuery</a>
      <a href="#" class="tag">Web设计</a>
      <a href="#" class="tag">前端开发</a>
      <!-- 添加更多标签 -->
   </div>
</body>
</html>

Salin selepas log masuk

Ringkasan
Dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta awan teg dinamik dengan mudah. Sila ambil perhatian bahawa ini hanyalah contoh asas, dan anda boleh menyesuaikan lagi gaya dan kefungsian awan teg mengikut keperluan sebenar anda. Semoga artikel ini membantu anda lebih memahami cara membuat awan teg dinamik.

Atas ialah kandungan terperinci Bagaimana untuk mencipta awan teg dinamik menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!