javascript - 无法在 html 中创建选项卡式面板

Question

我想创建一个包含三个选项卡的选项卡面板..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 标题丢失了，其他两个选项卡也是如此。

Answer 1

通常，您需要有一个 <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 链接(标题)。