Bagaimana untuk melaksanakan susun atur tab sisi tetap menggunakan HTML dan CSS-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur tab sisi tetap menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-24 09:58:51

asal

1144 orang telah melayarinya

Bagaimana untuk melaksanakan susun atur tab sisi tetap menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur tab sisi tetap

Dalam reka bentuk dan pembangunan web, selalunya perlu untuk melaksanakan susun atur tab sisi tetap untuk memaparkan kandungan yang berbeza atau menavigasi halaman yang berbeza. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencapai reka letak sedemikian, dan memberikan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu menentukan struktur HTML untuk mengatur reka letak tab kita. Biasanya akan ada bar sisi dan kawasan kandungan utama. Bar sisi digunakan untuk meletakkan butang tab, dan kawasan kandungan utama digunakan untuk memaparkan kandungan yang sepadan dengan tab.

Berikut ialah contoh struktur HTML asas:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="sidebar">
    <button class="tab-button" onclick="openTab(event, 'tab1')">选项卡1</button>
    <button class="tab-button" onclick="openTab(event, 'tab2')">选项卡2</button>
    <button class="tab-button" onclick="openTab(event, 'tab3')">选项卡3</button>
  </div>
  <div class="content">
    <div id="tab1" class="tab-content">
      <h2>选项卡 1 内容</h2>
      <p>这是选项卡1的内容。</p>
    </div>
    <div id="tab2" class="tab-content">
      <h2>选项卡 2 内容</h2>
      <p>这是选项卡2的内容。</p>
    </div>
    <div id="tab3" class="tab-content">
      <h2>选项卡 3 内容</h2>
      <p>这是选项卡3的内容。</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan elemen div sebagai bar sisi dan meletakkan beberapa butang sebagai tab di dalamnya. Kawasan kandungan utama menggunakan beberapa elemen div dan mengurus kandungan tab yang berbeza dengan menetapkan id unik untuk setiap elemen div.

2. Gaya CSS

Seterusnya, anda perlu menggunakan gaya CSS untuk menentukan gaya dan tingkah laku reka letak tab.

Mula-mula, tambah gaya pada bar sisi dan butang tab:

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
  padding: 20px;
}

.tab-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  background-color: #ddd;
  text-align: left;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #bbb;
}

.tab-button.active {
  background-color: #ccc;
}

Salin selepas log masuk

Kod gaya di atas mentakrifkan lebar, warna latar belakang, padding dan gaya lain bar sisi, serta lebar, padding, dan jidar butang tab dsb. gaya. Pada masa yang sama, gaya tuding dan gaya aktif butang tab juga ditentukan.

Kemudian, tentukan gaya untuk kandungan tab:

.content {
  margin-left: 200px; /* 与侧边栏宽度一致 */
  padding: 20px;
}

.tab-content {
  display: none; /* 默认隐藏所有选项卡内容 */
}

.tab-content.active {
  display: block; /* 显示选中的选项卡内容 */
}

Salin selepas log masuk

Kod gaya di atas menggunakan sifat margin-kiri untuk menjajarkan kawasan kandungan utama dengan bar sisi dan menggunakan sifat paparan untuk mengawal paparan dan menyembunyikan kandungan tab . Secara lalai, semua kandungan tab disembunyikan dan hanya kandungan tab yang dipilih dipaparkan.

3. Tingkah laku JavaScript

Untuk menjadikan reka letak tab berfungsi dengan betul, kami juga memerlukan beberapa kod JavaScript untuk mengendalikan acara klik butang tab dan memaparkan kandungan tab yang sepadan mengikut butang tab yang diklik.

Berikut ialah contoh kod JavaScript asas:

function openTab(event, tabName) {
  var i, tabContent, tabButton;

  // 隐藏所有选项卡内容
  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  // 移除所有选项卡按钮的 active 样式
  tabButton = document.getElementsByClassName("tab-button");
  for (i = 0; i < tabButton.length; i++) {
    tabButton[i].className = tabButton[i].className.replace(" active", "");
  }

  // 显示选中的选项卡内容和添加 active 样式
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

Salin selepas log masuk

Kod JavaScript di atas menggunakan fungsi openTab untuk mengendalikan acara klik butang tab. Fungsi ini mula-mula menyembunyikan semua kandungan tab, kemudian mengalih keluar gaya aktif semua butang tab, dan akhirnya memaparkan kandungan tab yang dipilih dan menambah gaya aktif.

Akhir sekali, anda perlu menyimpan kod gaya CSS dan kod JavaScript di atas masing-masing sebagai fail style.css dan script.js, dan memperkenalkannya ke dalam fail HTML.

4. Ringkasan

Dengan struktur HTML, gaya CSS dan kod JavaScript di atas, kami boleh melaksanakan susun atur tab sisi tetap asas. Apabila pengguna mengklik pada butang tab yang berbeza, kandungan tab yang sepadan akan dipaparkan dan butang tab akan mempunyai gaya yang sepadan untuk menunjukkan keadaan yang dipilih.

Sudah tentu, contoh di atas hanyalah pelaksanaan asas, dan anda boleh menyesuaikan dan mengoptimumkan lagi reka letak dan gaya mengikut keperluan sebenar. Saya harap artikel ini membantu dalam melaksanakan susun atur tab sisi tetap menggunakan HTML dan CSS.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur tab sisi tetap menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!