Jquery .load「無法獲得」

我正在使用.load切換我的#content div中的內容，但是當我點擊一個鏈接時，它會將我帶到白色頁面，顯示「無法獲取/索引」或其他內容。最初的內容確實被加載，所以我知道前三行代碼的工作。任何想法爲什麼我「無法獲取」我的其他文件？Jquery .load「無法獲得」

這裏是我的HTML

<div id="nav"> 

    <ul> 
     <li><a href="index">Home</a></li> 
     <li><a href="portfolio">Portfolio</a></li> 
     <li><a href="about">About</a></li> 
    </ul> 

</div>

而且Jquery的

$(document).ready(function() { 
    // initial 
    $('#content').load('content/index.html'); 

    // handle menu clicks 
    $('ul#nav li a').click(function() { 
     var page = $(this).attr('href'); 
     $('#content').load('content/' + page + '.html'); 
     return false; 
    }); 
});

來源

2014-05-05 user3464627

它是'Portfolio.html'或'portfolio.html'？ –

檢查請求的URL是否正確。您可以使用Firebug或類似的開發工具來做到這一點。在瀏覽器上按下'F12'來調出開發工具。 – KBN

其小寫@MohammadAdil，我查過了。嗯，我很確定它，因爲index.html隨着投資組合和約 – user3464627

以下是答案 -

$(document).ready(function() { 
    // initial 
$('#content').load('content/index.html'); 

// handle menu clicks 
$('div#nav ul li a').click(function() { 
    var page = $(this).attr('href'); 
    $('#content').load('content/' + page + '.html'); 
    return false; 
}); 
});

不久，#nav是div的ID不是ul所以$('ul#nav li a').應該已經$('div#nav ul li a').更精確地$('div#nav > ul > li > a').

如果你想要一個像褪色動畫，試試這個 -

$('div#nav ul li a').click(function() { 
    var page = $(this).attr('href'); 
    $('#content').fadeOut('fast', function(){ 
     $('#content').load('content/' + page + '.html', function(){ 
      $('#content').fadeIn('fast'); 
     }); 
    }); 
    return false; 
});

但對於滑動動畫它會有點棘手，因爲你必須這樣做 -

拳滑動通過動畫寬度
然後使用CSS left
負載它以div來的窗口的右端，使寬度正常
變化left使其滑動再次離開左。

這會給你一個動畫之間的空間，但如果你想要無空間的動畫，那麼你將不得不使用更多的div和更多的邏輯。快樂的實驗.. :)

來源

2014-05-05 14:28:27

我不能相信我錯過了！非常感謝！ – user3464627

有點偏離主題......但是，我會如何讓頁面之間的轉換更流暢？像從左邊飛入？或淡入？ – user3464627

用淡入淡出更新了我的答案，但幻燈片有點複雜，因此剛剛描述了製作幻燈片的其中一種方法，讓它自己去試試。:) –

根據您的編輯

你有一個錯誤的jQuery選擇，它應該是 -

$('#nav ul li a').click...

來源

2014-05-05 14:17:25

''return false;'從代碼應該照顧那個問題 – Spokey

當內容是動態加載 HTML元素的行動將不會被直接。點擊逮住（）函數所以：

使用$(document).on('click', 'ul#nav li a', function() {

而不是$('ul#nav li a').click(function() {

爲此工作me

來源

2014-05-05 14:22:15

Jquery .load「無法獲得」

回答

相關問題