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

问题在于您的“内容”块在之后来到文档中的菜单，因此当它们可见时它们会覆盖菜单。

Here is a fixed jsfiddle to demonstrate.

我更新了CSS：

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

我还添加CSS移动 “gameField” 的东西的方式进行。

诊断这样的问题可能非常棘手，但开发人员工具（“检查员”）通常使其更容易。