通过在django表单模板中单击来获取活动选项卡

<button id="tab1-btn">选项卡1</button>
<button id="tab2-btn">选项卡2</button>
<button id="tab3-btn">选项卡3</button>

<div id="tab1-content">
    选项卡1的内容
</div>

<div id="tab2-content">
    选项卡2的内容
</div>

<div id="tab3-content">
    选项卡3的内容
</div>

document.getElementById("tab1-btn").addEventListener("click", function() {
    showTab("tab1");
});

document.getElementById("tab2-btn").addEventListener("click", function() {
    showTab("tab2");
});

document.getElementById("tab3-btn").addEventListener("click", function() {
    showTab("tab3");
});

function showTab(tabId) {
    // 隐藏所有选项卡内容
    var tabContents = document.querySelectorAll("[id$='-content']");
    for (var i = 0; i < tabContents.length; i++) {
        tabContents[i].style.display = "none";
    }
    
    // 显示指定选项卡内容
    var tabContent = document.getElementById(tabId + "-content");
    if (tabContent) {
        tabContent.style.display = "block";
    }
}

[id$='-content'] {
    display: none;
}

#tab1-content {
    display: block;
}