0

テキストだけのメインテキストウィンドウを持つ単純な Web サイトを作成しています。Home、About、Contact などのボタンが欲しいのですが、about.html、contact.html などは作成したくありませんが、新しいページを読み込まずにテキストを変更したいですか? （そのため、より滑らかに感じます）。

そこで、各ページ (ホーム、アバウトなど) に適したテキストでいくつかの段落を作成しました。ボタンをクリックして段落を変更するには？または、各ページの .html ファイルを作成せずにこれを行う簡単な方法はありますか?

前もって感謝します。

4

4 に答える 4

2

jQuery UI tabsプラグインを確認するとよいでしょう。これは、コンテンツをインラインに配置する場合に必要なことを正確に実行します。または、別々のコンテンツ ファイルを作成し、同じプラグインを使用して AJAX 経由でロードすることもできます。プラグインを使用しないことにした場合でも、ページの読み込み時にメインの「タブ」以外をすべて非表示にする同様の手法を使用して同じ効果を得ることができます。次に、div のアンカーとボタンの適切な href を使用して、どのタブを決定できるかを決定できます。表示するタブ。

jQuery UI アコーディオンは、ページごとに複数のコンテンツ セクションを処理するもう 1 つの方法です。

于 2012-12-21T02:50:06.507 に答える
1

jQuery Ui Tabsと jQuery UI Accordionを使用します。

jQuery UI アコーディオンを使えばとても簡単です。

jQuery UI アコーディオン

jQuery UI タブ

于 2012-12-21T04:09:18.223 に答える
0

データをメモリ (変数など) に保存してから、クリック イベントを div を変更する関数にバインドできますか?

于 2012-12-21T02:43:18.377 に答える
0

私はtvanfossonに同意し、UIタブやAJAXの読み込みなどをお勧めしますが、非常に初歩的な方法を見たい場合は、jQueryの非表示/表示で行うことができます:

http://jsfiddle.net/ADDPH/7/

HTML

<div id="container">
    <ul id="nav">
        <li><a href="#" class="index">Index</a></li>
        <li><a href="#" class="contact">Contact</a></li>
        <li><a href="#" class="other">Other</a></li>
    </ul>
    <div id="content">
        <div class="index hide">This is the home page.</div>
        <div class="contact hide" style="display:none;">This is my contact info.</div>
        <div class="other hide" style="display:none;">This is other stuff.</div>
    </div>
</div>​

jQuery

$("#nav a").click( function() {
    $(".hide").hide(); // hide other divs, marked with hide class
    var c = $(this).attr('class').split(' ')[0]; //Get First Class
    $("#content ."+c).show(); //show anything inside content div with the class c (marked with a . to represent class)
});​
于 2012-12-21T03:50:51.587 に答える