我想创建一个包含三个选项卡的选项卡面板.. html代码和脚本如下:
<span id="tab1">
<a href="#" onClick="showTabOne();"> Tab-1 |</a>
</span>
<span id="tab2"><a href="#" onClick="showTabTwo();"> Tab-2 |</a> </span>
<span id="tab3"><a href="#" onClick="showTabThree();"> Tab-3 |</a> </span>
</div>
<script type="text/javascript">
function showTabOne() {
document.getElementById("tab1").innerHTML = "yayy ! this is tab-1";
}
function showTabTwo() {
document.getElementById("tab2").innerHTML = "and this is tab-2";
}
function showTabThree() {
document.getElementById("tab3").innerHTML = "and..tab-3";
}
</script>
当我点击 tab1 时,它显示了它的内容,但是 tab1 标题丢失了,其他两个选项卡也是如此。
最佳答案
通常,您需要有一个 <span id = "tabContent"></span>
在您的标签链接(标题)之后。
HTML 代码如下所示:
<span id="tab1">
<a href="#" onClick="showTabOne();"> Tab-1 |</a>
</span>
<span id="tab2"><a href="#" onClick="showTabTwo();"> Tab-2 |</a> </span>
<span id="tab3"><a href="#" onClick="showTabThree();"> Tab-3 |</a> </span>
<span id = "tabContent"></span> <!-- newly added line -->
</div>
并且,代码应该更改为:
function showTabOne() {
document.getElementById("tabContent").innerHTML = "yayy ! this is tab-1";
}
function showTabTwo() {
document.getElementById("tabContent").innerHTML = "yayy ! this is tab-2";
}
function showTabThree() {
document.getElementById("tabContent").innerHTML = "yayy ! this is tab-3";
}
您的代码存在问题,您正在用选项卡内容替换 tab1 链接(标题)。
关于javascript - 无法在 html 中创建选项卡式面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25132044/