在选项卡中动态打开表单可以通过以下步骤实现:
<div class="tab-container">
<div class="tab">
<button class="tablinks" onclick="openForm(event, 'form1')">表单1</button>
<button class="tablinks" onclick="openForm(event, 'form2')">表单2</button>
<button class="tablinks" onclick="openForm(event, 'form3')">表单3</button>
</div>
<div id="form1" class="tabcontent">
<!-- 表单1的内容 -->
</div>
<div id="form2" class="tabcontent">
<!-- 表单2的内容 -->
</div>
<div id="form3" class="tabcontent">
<!-- 表单3的内容 -->
</div>
</div>
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #ccc;
background-color: white;
}
.tabcontent.show {
display: block;
}
function openForm(evt, formName) {
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(formName).style.display = "block";
evt.currentTarget.className += " active";
}
openForm()
函数来切换表单内容的显示。<button class="tablinks" onclick="openForm(event, 'form1')">表单1</button>
<button class="tablinks" onclick="openForm(event, 'form2')">表单2</button>
<button class="tablinks" onclick="openForm(event, 'form3')">表单3</button>
通过以上步骤,就可以在选项卡中实现动态打开表单的效果。用户点击不同的选项卡按钮时,对应的表单内容会显示出来,其他表单内容则会隐藏起来。这种方式可以有效地组织和管理多个表单,并提供更好的用户体验。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云