溫馨提示×

js簡單選項卡功能怎么實現(xiàn)

js
小億
84
2023-09-21 20:32:39
欄目: 編程語言

要實現(xiàn)簡單的選項卡功能，你可以使用JavaScript和HTML的結(jié)合。以下是一個簡單的選項卡實現(xiàn)示例：

<!DOCTYPE html>
<html>
<head>
<style>
.tabcontent {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
<div id="tab1" class="tabcontent">
<h3>Content for Tab 1</h3>
<p>This is the content for Tab 1.</p>
</div>
<div id="tab2" class="tabcontent">
<h3>Content for Tab 2</h3>
<p>This is the content for Tab 2.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Content for Tab 3</h3>
<p>This is the content for Tab 3.</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// 默認(rèn)顯示第一個選項卡
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].className += " active";
</script>
</body>
</html>

在上面的示例中，我們使用 tabcontent 類來隱藏所有的選項卡內(nèi)容，然后使用 tablinks 類來處理點擊事件。 openTab 函數(shù)會在點擊選項卡按鈕時被觸發(fā)，它會根據(jù)點擊的選項卡按鈕顯示相應(yīng)的選項卡內(nèi)容，并將點擊的選項卡按鈕設(shè)置為活動狀態(tài)。最后，我們通過設(shè)置第一個選項卡為默認(rèn)打開來初始化選項卡功能。

你可以根據(jù)需要修改選項卡的樣式和內(nèi)容。

0 踩