0

ここ数日間解決策を探していましたが、解決策が見つからなかったので、ここにいる誰かが助けてくれるかどうか見てみようと思いました. about.htmlさまざまなナビゲーション リンクがクリックされたときに、外部の html ページ (同じドメイン - ちょうど別のページ、つまり) など) のコンテンツをdiv 内のcontact.htmlメイン ページに表示しようとしています (つまり、About、contact など) ）。サイトの「メインコンテンツ」を外部ページに保存することで、ナビゲーション選択間の更新を回避できることを願っています.index.html#topContent

これまでのところ、デフォルトのページ ロード (外部main.htmlドキュメント) を作成できましたが、何らかの理由でナビゲーション リンクをクリックすると別のページにリダイレクトされ、「.html」がパス (表示されることを期待: site.com/about.html -- 実際に表示される: site.com/about )

私の現在の変更はここにあります: http://staging-site.site44.com/で、jsFiddle ファイルを作成しますが、このセットアップには複数の html ファイルをロードする必要があるため、jsFiddle では実行できないと思います。

どんな助けでも大歓迎です！

ありがとう！

HTML

    <nav id="headerNav">

            <ul class="navList">
                <li class="navItem"><a href="products" id="home" class="nav">Products</a></li>
                <li class="navItem"><a href="about" id="about" class="nav">About</a></li>
                <li class="navItem"><a href="portfolio" id="portfolio" class="nav">Portfolio</a></li>
                <li class="navItem"><a href="contact" id="contact" class="nav">Contact</a></li>
            </ul> 

        </nav>


    </div>

</div>

<!-- topMain -->
<div id="topContentWrapper">

     <div id="topContent">





    </div>



</div>

JS

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function() {
//load home.html on click
    $("topContent").load("home.html");
});

$("#products").click(function() {
//load home.html on click
    $("topContent").load("products.html");
});

$("#about").click(function() {
//load home.html on click
    $("topContent").load('about.html #topContent');
});

$("#portfolio").click(function() {
//load home.html on click
    $("topContent").load("portfolio.html");
});
 });
4

4 に答える 4

1

Javascript が間違っています:

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("home.html");
});

$("#products").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("products.html");
});

$("#about").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load('about.html');
});

$("#portfolio").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("portfolio.html");
});
 });

jQuery に「#」セレクターがありませんでした。したがって、あなたのクリックは topContent 要素に何もロードできませんでした。また、リンクがクリックされたときに href をたどろうとするのを防ぐために e.preventDefault() を追加する必要があります。

于 2013-01-14T18:38:11.670 に答える
0

あなたの問題は、href が正しく設定されておらず、「.html」が欠落しており、$('topContent') セレクターに「#」が欠落していることが原因です。ところで、クリックしたときの「A」タグのデフォルトの動作を防ぐ必要があります。

リファクタリングを使用して、次のコードを参照してください: {better practice}

$(document).ready(function() {
   // Load default page content of main.html
   $("#topContent").load("main.html");

   $(".nav").click(function(e) {
       e.preventDefault();
       $("#topContent").load($(this).attr('href')+".html");
   });

 });
于 2013-01-14T18:35:35.977 に答える
0

まず、アンカーに .html を含めます。

<ul class="navList" id="main-menu">
    <li><a href="products.html">Products</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

次に、それらすべてに対して 1 つの jQuery 関数を使用します。

$('#main-menu a').click(function(event){
    event.preventDefault(); // stops the page redirect

    var htmlFile = $(this).attr('href');    // gets href value from the anchor
    $.get(htmlFile, function(data) {        // you could use get/ajax/load
        $('#topContent').html(data);
    });
});

思いつきなので多少の誤差はあるかもしれません。

追記:それほど多くのクラスは必要ありません。

于 2013-01-14T18:39:14.900 に答える
0

以下のスクリプトはクロムコンソールで機能しました

$('#topContent').load('about.html', function() {

});

問題はにありhref="pagename"、入れhref="#"てから以下の関数を使用します

$("#about").click(function() {

$('#topContent').load('about.html', function() {

});
});
于 2013-01-14T18:40:03.413 に答える