Функция jquery / javascript работает только один раз

0

У меня очень странная ситуация, я все посмотрел и не могу найти кого-то с подобной ситуацией, и в моих глазах я не понимаю, почему это работает. Я пытаюсь сделать простой список вкладок с 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, но понятия не имеет. Кто-нибудь знает, почему это может произойти?

Заранее спасибо.

  • 0
    Нажмите F12, чтобы открыть консоль разработчика и посмотреть, есть ли у вас ошибки JavaScript.
  • 0
    Не могли бы вы сделать скрипку со своим кодом?

1 ответ

3
Лучший ответ

Проблема в том, что ваши "контентные" блоки поступают после меню в документе, поэтому, когда они видны, они закрывают меню вверх.

Здесь показан фиксированный jsfiddle для демонстрации.

Я обновил CSS:

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

Я также добавил CSS, чтобы переместить материал "gameField" в сторону.

Трудно диагностировать такие проблемы, но инструменты разработчика ("инспектор") делают это намного проще.

  • 0
    Я просто лицом так сильно ладонями, спасибо за ответ, это сработало! Спасибо за подсказку, буду забывать об этом позже.
  • 0
    другой jsfiddle.net/ZGULb/11

Ещё вопросы

Сообщество Overcoder
Наверх
Меню