0

タブ付きの 2 つの div があります。適切なタブ名のクリックでコンテンツを前後に切り替えることができるようにする JavaScript または jquery スクリプトを作成する必要があります。

ここでフィドルを作成しました。私はまだJavaScriptを書き始めていませんが。誰か見てもらえますか？それはかなり簡単なようです：

(IDを更新しました)

  • 準備完了で div1 を表示し、

  • div1 を非表示にし、div2 を onclick link1 に表示し、

  • div2 を非表示にし、div1 を表示 onclick link2

初めて使ってみた

$('#showTree').click(function() {
    $('#div1').hide();
    $('#div2').show();
}),
    $('#showTree2').click(function() {
    $('#div1').show();
    $('#div2').hide();
});

しかし、これはうまくいきませんでした。誰かフィドルを見てアドバイスをくれませんか？よろしくお願いします！

4

2 に答える 2

0

現在アクティブなタブを知るには、何らかのクラスを使用する必要があります。.toggle() show/hide 実際の例をここで試して ください

$('span.a, span.b').click(function() {
if(!$(this).hasClass('active')) {
    $('span.a, span.b').removeClass('active');
    $(this).addClass('active');
    $('div.a, div.b').toggle();
}

});

于 2013-02-18T21:28:18.893 に答える
0

あなたの主な問題は、無効なマークアップがあることです。このため#div2、 の子になってい#div1ます。隠れた瞬間、#div1も#div2隠れる。

<div id="div1">
    <div class="sidebar">
    </div>
<div id="div2">
    <div class="sidebar">
    </div>

終了タグを一致させる必要があります。

<div id="div1">
    <div class="sidebar">
    </div>
</div>
<div id="div2">
    <div class="sidebar">
    </div>
</div>

また、重複した を修正する必要がありますid。特に#showTreeと#showTree2. 簡単な修正は、代わりにクラス名を使用することです。あれは、

<nav class="sidebartabs">
  <a href="#" class="showTree">Questions by Folder</a>
  <a href="#" class="showTree2">Questions by Category</a>
</nav>

ページの読み込み時に非#div2表示にするには、CSS を使用します。

.hidden {
  display: none;
}


<div id="div2" class="hidden">...</div>

ここで実際の例を参照してください。

于 2013-02-18T21:30:59.213 に答える