jQuery / JavaScript函数仅可使用一次

Question

I have a very odd situation, I have looked all over and cannot find someone with a similar situation, and in my eyes, I don't see why this inst working. I'm trying to make a simple tab list with jQuery:

I have a JS function as follows:

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.
}

My html is:

<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>

I dont think it matters much, but here is my CSS(I left some out):

#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;
}

The curious thing is, this function will run once(ie i can click a tab) and everything works perfect. But after i click a tab, the CSS property cursor: pointer; no longer did anything, and the JS function no longer works. I have tested and other functions still run when called, just not this one. After a bit of testing, I came to the conclusion that it is because of the last line in the JS function. When I comment it all works well(except that the Heads don't show). I dont understand what is going on, i think it is an HTML problom, but have no clue. Does anyone know why this may be happening?

Thanks in advance.

Answer 1

The problem is that your "content" blocks come after the menu in the document, so when they're visible they cover the menu up.

Here is a fixed jsfiddle to demonstrate.

I updated the CSS:

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

I also added CSS to move the "gameField" stuff out of the way.

It can be tricky to diagnose problems like this, but the developer tools ("inspector") generally make it a lot easier.