CSS カテゴリ タブには、次の手順に従って、カテゴリ コンテンツを表示できます。 タブ ボタンとコンテンツを含む HTML コンテナを作成し、その ID 属性を JavaScript を使用して設定します。タブ ボタンのクリックをリッスン すべてのタブ コンテンツを非表示にし、クリックされたボタンに対応するタブ コンテンツを表示するイベント。
CSS カテゴリ タブを開く方法
CSS カテゴリ タブはコンテンツを整理および表示する方法であり、ユーザーはタブをクリックしてコンテンツの異なるカテゴリを切り替えることができます。 CSS カテゴリ タブを開くには、次の手順に従う必要があります:
HTML 構造
または
要素を作成し、その id
属性を設定します。
或
元素,并设置其 id
属性。 元素,并设置其 id
タブのコンテンツごとに 要素を作成し、その id
属性を設定します。
サンプルの HTML 構造は次のとおりです:
内容 1
内容 2
ログイン後にコピー
CSS スタイル
- 背景色、フォント サイズ、配置など、タブ バーのスタイルを設定します。
- 非アクティブ状態とアクティブ状態のスタイルを含む、タブ ボタンのスタイルを設定します。
- 背景色、パディング、境界線などのタブコンテンツのスタイルを設定します。
サンプル CSS スタイルは次のとおりです:
.tabs {
display: flex;
background-color: #f1f1f1;
padding: 10px;
}
.tabs button {
padding: 10px 20px;
background-color: #ccc;
border: none;
cursor: pointer;
}
.tabs button.active {
background-color: #f1f1f1;
}
.tabs div {
display: none;
padding: 20px;
}
.tabs div.active {
display: block;
}
ログイン後にコピー
JavaScript イベント処理
- JavaScript を使用して、タブ ボタンのクリック イベントをリッスンします。
- ユーザーがボタンをクリックしたときにすべてのタブのコンテンツを非表示にします。
- クリックされたボタンに対応するタブの内容を表示します。
以下は JavaScript イベント処理の例です: 🎜const tabs = document.querySelector('.tabs');
tabs.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
const tabId = e.target.id;
const contentId = tabId.replace('tab', 'content');
const buttons = tabs.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));
e.target.classList.add('active');
const contents = tabs.querySelectorAll('div');
contents.forEach(content => content.classList.remove('active'));
const content = tabs.querySelector(`#${contentId}`);
content.classList.add('active');
}
});
ログイン後にコピー以上がCSSカテゴリタブの開き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-05-10 05:00:26
-
2024-05-10 04:57:21
-
2024-05-10 04:54:17
-
2024-05-10 04:51:19
-
2024-05-10 04:45:28
-
2024-05-10 04:39:16
-
2024-05-10 04:33:20
-
2024-05-10 04:30:23
-
2024-05-10 04:27:19
-
2024-05-10 04:24:18
最新の問題
CSS の小数点の先頭のゼロが大きな数値では機能しない
最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...
から 2023-11-07 10:35:53
0
1
236
HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか?
皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...
から 2023-11-06 13:59:13
0
1
240