2

ウェブサイトは非常にシンプルで、同じテンプレートを使用するわずか 4 ページで構成されています。ユーザーが何もリロードせずに上部のリンクをクリックして、さまざまなページをシームレスに閲覧できるようにしたいと考えています。

基本的に、ユーザーが最初に Web サイトにアクセスしたときに、Web サイト全体をロードする必要があります。次に、最初のページの読み込みが完了した後、ユーザーは上部の任意のリンクをクリックできます。新しい Web ページは何もリロードせずに表示されます。

これを達成するには、JqueryまたはJavascriptを使用する必要があることを知っています。どのJquery / Javascript関数がこれを行うのかわかりません。すべての Web ページは非常にシンプルで類似しています。

4

4 に答える 4

4

基本的には、各「ページ」（実際にはdivなど）にIDまたはクラスを割り当ててから、CSSファイルでそれぞれをdisplay：noneに設定します。次に、jQueryの.show（）と.hide（）を使用して、それらを表示または非表示にします。

具体的には、いくつかのハンドラーをナビゲーションにバインドする必要があります。たとえば、ホームナビゲーションアイテムの場合：

$("#my-home-nav").click(function(){
    $("#my-home-div").show(); // or .fadeIn(), etc.
    $("#my-about-div").hide();
    $("#my-contact-div").hide();
});

上記は、ページ数が多い場合にこの種の冗長な記述を行う可能性があり、ページを追加するのはやや困難です。以下のようなものを使用すると、ページを追加しやすくなる場合があります。

var pageNames = ["home", "about", "contact"];
var namespace = "my";

var pages = pageNames.map(function(pageName) {
    return {
        nav: pageNameSelector(pageName, "nav"),
        div: pageNameSelector(pageName, "div")
    };
});

pages.forEach(function(page) {
    page.nav.click(function() {
        clearPages(pages);
        page.div.show();
    });
});

function pageNameSelector(pageName, type) {
    return $(["#" + namespace, pageName, type].join("-"));
}

function clearPages(pages) {
    pages.forEach(function(page) {
        page.div.hide();
    });
}

したがって、あなたがしなければならないのは、nav / divのIDが与えられている追加のページを識別するための同じ規則に従うことNAMESPACE-PAGENAME-TYPEです。追加のページ名をに追加するpageNamesと、表示/非表示機能が機能します。

于 2013-03-20T01:21:56.703 に答える
2

あなたはほとんどタブを説明しています。これには jQuery UI タブを使用できます: http://jqueryui.com/tabs/

または、独自のタブをロールすることもできます。コンテンツを非表示にしてから、リンクをクリックすると適切なコンテンツが表示され、他のすべてが非表示になります。私は自分で作成する傾向があります。これは、自分の思い通りに動作させることができ、必要のない余分なオーバーヘッド「もの」がないためです。試してみてうまくいかない場合は、常に jQuery UI に頼ることができます。

于 2013-03-20T01:27:53.083 に答える
1

JQuery Toolsと呼ばれる JQuery プラグインがあり、必要なものを含め、一般的な Web デザイン機能のための簡単なインターフェイスを提供します。具体的には、タブ機能を使用すると<div>、 内のリンク<ul>がクリックされたときに特定の をロードできます。http://jquerytools.org/demos/tabs/index.htmlから:

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
</div>

必要な唯一の JavaScript は次のとおりです。

// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

これにより、すべてのリンクが直接の子でul.tabsある各 div に移動します(したがって、必要に応じてそこにあることを確認してください)。div.panes>

于 2013-03-20T01:37:27.300 に答える
0

フレームも使えます。1 つの Web ページに複数のフレームが含まれている場合があり、そのうちのいくつかを非表示にすることもできます (スイッチを含める)。このリンクを確認してください: http://www.pageresource.com/jscript/jframe1.htm

于 2013-03-20T01:40:49.420 に答える