pelaksanaan css tab

Dalam reka bentuk web, mencapai kesan penukaran tab adalah keperluan biasa. Kesan ini boleh dicapai dengan mudah menggunakan CSS Mari terangkan secara terperinci cara menggunakan CSS untuk mencapai penukaran Tab.

Pertama, kita perlu menyediakan kod HTML. Penukaran tab selalunya terdiri daripada satu set kawasan kandungan dan butang navigasi yang sepadan, seperti yang ditunjukkan di bawah:

<div class="tabs">
  <div class="tab-nav">
    <a href="#" class="active">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">Tab 3</a>
  </div>
  <div class="tab-content active">
    <p>这是Tab 1的内容</p>
  </div>
  <div class="tab-content">
    <p>这是Tab 2的内容</p>
  </div>
  <div class="tab-content">
    <p>这是Tab 3的内容</p>
  </div>
</div>

Dalam contoh ini, kami menggunakan bekas .tabs untuk memuatkan elemen berkaitan Tab, termasuk butang navigasi dan kandungan kawasan. .tab-nav digunakan untuk meletakkan butang navigasi Tab, .tab-content digunakan untuk meletakkan kandungan Tab dan .active mewakili keadaan lalai butang navigasi atau kawasan kandungan.

Seterusnya, kita perlu menggunakan CSS untuk mencapai kesan penukaran tab. Kita boleh menggunakan kelas pseudo :hover atau :focus untuk mencapai kesan tuding atau fokus butang navigasi, contohnya:

.tab-nav a:hover,
.tab-nav a:focus {
  background-color: #ccc;
}

Di sini kami telah menambah pseudo- .tab-nav a dan :hover kelas untuk :focus, Apabila tetikus dilegar atau butang navigasi difokuskan, kesan warna latar belakang #ccc akan muncul. Dengan cara ini, pengguna boleh melihat Tab yang dipilih dengan lebih intuitif.

Seterusnya, kita perlu menambah kesan animasi untuk penukaran Tab. Kita boleh mencapai kesan ini dengan menggunakan atribut transition CSS3, contohnya:

.tab-content {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.tab-content.active {
  opacity: 1;
}

Di sini kami menetapkan keadaan lalai .tab-content opacity kepada 0, menunjukkan bahawa tiada kandungan dipaparkan. Kemudian kami menambahkan atribut .tab-content pada transition, yang bermaksud ia akan menghasilkan kesan fade-in dan fade-out dalam masa 0.3 saat. Apabila .tab-content berada dalam keadaan .active, opacity ditetapkan kepada 1 untuk memaparkan kandungan tertentu.

Akhir sekali, kita perlu menyedari kaitan antara butang navigasi Tab dan kawasan kandungan Di sini kita boleh menggunakan :target kelas pseudo CSS, contohnya:

.tab-content:target {
  display: block;
}

.tab-content {
  display: none;
}

Di sini kita. tambah <🎜 ke .tab-content > Kelas pseudo, yang bermaksud bahawa hanya apabila elemen diletakkan oleh sasaran utama, :target elemen ditetapkan kepada display untuk memaparkan kandungan tertentu. Apabila ia tidak diletakkan oleh sasaran sauh, tetapkan block .tab-content kepada display untuk menyembunyikannya. none

<div class="tabs">
  <div class="tab-nav">
    <a href="#tab1" class="active">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
  </div>
  <div class="tab-content active" id="tab1">
    <p>这是Tab 1的内容</p>
  </div>
  <div class="tab-content" id="tab2">
    <p>这是Tab 2的内容</p>
  </div>
  <div class="tab-content" id="tab3">
    <p>这是Tab 3的内容</p>
  </div>
</div>

Atas ialah kandungan terperinci pelaksanaan css tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!