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

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

Here is a fixed jsfiddle to demonstrate.

我更新了CSS：

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

我还添加了CSS来移动“gameField”的东西。

诊断这样的问题可能很棘手，但开发人员工具（“检查员”）通常会让它变得更容易。

jquery / javascript函数只能运行一次

1 个答案: