javascript - jquery/javascript 函数只能工作一次

Question

我的情况很奇怪，我找遍了都找不到有类似情况的人，在我看来，我不明白为什么这会起作用。我正在尝试使用 jQuery 制作一个简单的选项卡列表:

我有一个JS函数如下:

function changeWindow(contentId) {
    $(".tabs").css("border-bottom","thin solid black");
    $("#" + contentId + "Tab").css("border-bottom","thick solid white");
    $(".content").hide();
    $("#" + contentId).show();
    $("#" + contentId + "Head").show();    //when I comment this line, all works well.
}

我的 html 是:

<div id="header">
    <div id="tabs">
        <span onClick="changeWindow('browse')" id="browseTab" class="tabs"> Browse </span>
        <span onClick="changeWindow('collection')" id="collectionTab" class="tabs"> My Collection </span>
        <span onClick="changeWindow('play')" id="playTab" class="tabs"> Play! </span>
    </div>
    <div id="contentHeads">
        <div id="browseHead" class="content">
            some Html
        </div>
        <div id="collectionHead" class="content">
            some Html
        </div>
        <div id="playHead" class="content">
            some Html
        </div>
    </div>
</div>
<div id="gameField">
    <div id="browse" class="content">
        some Html
    </div>
    <div id="collection" class="content">
        some Html
    </div>
    <div id="play" class="content">
        some Html
    </div>
</div>

我认为这无关紧要，但这是我的 CSS(我遗漏了一些):

#tabs
{
    position: absolute;
    top: 10px;
    left: 10px;
    border-bottom: medium solid black;
}
.tabs
{
    border: thin solid black;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}
.content
{
    position: relative;
    height: 100%;
    overflow: hidden;
}

奇怪的是，这个函数将运行一次(即我可以单击一个选项卡)并且一切正常。但是在我点击一个选项卡后，CSS 属性 cursor: pointer; 不再做任何事情，JS 函数也不再起作用。我已经测试过，其他函数在调用时仍然运行，只是这个函数不行。经过一番测试，我得出结论，这是因为 JS 函数中的最后一行。当我发表评论时，一切都很好(除了头像不显示)。我不明白发生了什么，我认为这是一个 HTML 问题，但没有任何线索。有谁知道为什么会这样？

提前致谢。

Answer 1

问题是您的“内容” block 在文档中的菜单之后，所以当它们可见时，它们会覆盖菜单。

Here is a fixed jsfiddle to demonstrate.

我更新了 CSS:

.content {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin-top: 40px;
    display: none;
}

我还添加了 CSS 以将“gameField”内容移开。

诊断此类问题可能很棘手，但开发人员工具(“检查器”)通常会使它变得容易得多。