ネイティブに、日本語で言い換えて下さい。ただ1つのオプションが必要です:JSでタブを切り替える

以下に単純な JS によるタブの実装例を示します。

ネイティブの日本語で文章を言い換えてください。1 つのオプションのみ必要です: HTML コード:

<div class="tab-container">
<button class="tab" onclick="openTab(event, 'tab1')">选项卡1</button>
<button class="tab" onclick="openTab(event, 'tab2')">选项卡2</button>
<button class="tab" onclick="openTab(event, 'tab3')">选项卡3</button>
<div id="tab1" class="tab-content">
<h3>选项卡 1 内容</h3>
<p>这是选项卡 1 的内容。</p>
</div>
<div id="tab2" class="tab-content">
<h3>选项卡 2 内容</h3>
<p>这是选项卡 2 的内容。</p>
</div>
<div id="tab3" class="tab-content">
<h3>选项卡 3 内容</h3>
<p>这是选项卡 3 的内容。</p>
</div>
</div>

CSSコード：

.tab-container {
max-width: 600px;
margin: 0 auto;
}
.tab {
background-color: #f1f1f1;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px 4px 0 0;
cursor: pointer;
}
.tab:hover {
background-color: #ddd;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
.tab-content h3 {
margin-top: 0;
}
.tab-content p {
margin-bottom: 0;
}

ネイティブな日本語にパラフレーズします。

function openTab(event, tabId) {
// 获取所有的选项卡按钮和内容
var tabButtons = document.getElementsByClassName('tab');
var tabContents = document.getElementsByClassName('tab-content');
// 隐藏所有的选项卡内容
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// 重置所有选项卡按钮的样式
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].className = tabButtons[i].className.replace(' active', '');
}
// 显示当前选项卡内容
document.getElementById(tabId).style.display = 'block';
// 添加 active 类到当前选项卡按钮
event.currentTarget.className += ' active';
}

この例では、openTab 関数を使用してタブの切り替えを制御しています。ユーザーがタブボタンをクリックすると、この関数が呼び出され、イベントオブジェクトとタブの ID が渡されます。この関数はまず、すべてのタブコンテンツを非表示にした後、現在のタブコンテンツを表示します。同時に、すべてのタブボタンのスタイルをリセットし、現在のタブボタンに active クラスを追加して、現在のタブを強調表示します。

最後に CSS を使ってタブおよびタブコンテンツのスタイルを設定します。

上記のコードをHTMLファイルにコピーしてブラウザで実行すれば効果を確認できます。