У меня очень странная ситуация, я все посмотрел и не могу найти кого-то с подобной ситуацией, и в моих глазах я не понимаю, почему это работает. Я пытаюсь сделать простой список вкладок с 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;
}
Любопытно, что эта функция будет запускаться один раз (т.е. я могу щелкнуть вкладку), и все работает отлично. Но после того, как я нажму вкладку, cursor: pointer;
свойства CSS cursor: pointer;
больше ничего не делал, и функция JS больше не работает. Я тестировал и другие функции выполняются при вызове, а не в этом. После небольшого тестирования я пришел к выводу, что это из-за последней строки в JS-функции. Когда я комментирую, все работает хорошо (кроме того, что главы не показывают). Я не понимаю, что происходит, я думаю, что это проблема HTML, но понятия не имеет. Кто-нибудь знает, почему это может произойти?
Заранее спасибо.
Проблема в том, что ваши "контентные" блоки поступают после меню в документе, поэтому, когда они видны, они закрывают меню вверх.
Здесь показан фиксированный jsfiddle для демонстрации.
Я обновил CSS:
.content {
position: relative;
height: 100%;
overflow: hidden;
margin-top: 40px;
display: none;
}
Я также добавил CSS, чтобы переместить материал "gameField" в сторону.
Трудно диагностировать такие проблемы, но инструменты разработчика ("инспектор") делают это намного проще.