-1

複数のボタンがあり、それぞれにサブジェクト名が表示されています。例: 英語、数学、社交、フランス語など。

これらのボタンのいずれかをクリックすると、そのコンテンツが表示されます。コンテンツは各ボタン (サブジェクト) に固有です。div コンテナーは 1 つしかありません。特定のボタンが選択されると、対応するコンテンツが表示され、次のボタンが表示されると、現在のコンテンツが新しいボタンのコンテンツに置き換えられ、これらはすべてクリック時にのみ発生する必要があります。

Javaスクリプトとクエリは初めてです。助けてください。

ここに私のHTMLがあります

<div id="graybox">
    <button type="button">English</button>
    <button type="button">Math</button>
    <button type="button">French</button>
    <button type="button">Social</button>
</div>

<div id="whitebox">
    on click of the subject above, respective content will be shown here, 
</div>

PS: 科目はデータベースから取得されます。5 科目、8 科目、または任意の数にすることができます。そのため件名と番号は固定ではありません。

4

4 に答える 4

0

display:none を使用して CSS クラスを作成し、それを div に適用してから、Javascript を介してボタンをクリックして div からクラスを削除します。より詳細なヘルプが必要な場合は、HTML を投稿してください。

于 2013-04-08T09:56:34.060 に答える
0

これを使って

HTML

<div class="container">
    <ul>
        <li><button>English</button> <span>English Description</span></li>
         <li><button>Maths</button> <span>Maths Description</span></li>
         <li><button>Social</button> <span>Social Description</span></li>
         <li><button>French</button> <span>French Description</span></li>
    </ul>
</div>

Jクエリ 

$("button").click(function() {
  $(this).siblings("span").show();
});

デモ

于 2013-04-08T09:57:23.067 に答える