如何使HTML頁面的一個區域重定向到另一URL，而頁面的其余部分保持不變？

Question

我正在使用Codeigniter開發CMS后端。 用文字陳述我的問題也許還不清楚。 因此，我使用一些簡單的html代碼來表達我的問題：有一個名為A.html的html頁面。 A.html的代碼如下：

<html>
   <head>
      /*something*/
   </head> 
    <!-- menu area -->
    <div class="menu">
       <ul class="nav">
         <li class="nav-header">menu item1</li>
         <li class="nav-header">menu item2</li>
         <li class="nav-header">menu item3</li>
       </ul>
    </div>


    <!-- content area -->
    <div id="content">
    </div>
</html>

我知道我們可以在單擊nav-header時使用jQuery的負載來更改#content的內容。但是我的問題是，如何才能僅在內容區域（ #content ）中更改內容，而其余頁面內容仍然保留單擊內容區域中的鏈接（ #content ）時也是如此。 我已經嘗試過iframe ，但是它使頁面更加復雜，我不喜歡它。 謝謝。

更新：另一個例子：比如，我點擊“新聞列表”菜單項，然后將#content的變化，來顯示新聞list.Now我點擊“添加新聞”的鏈接#content ，我怎樣才能讓#content區域顯示添加新聞表單，而頁面的其余部分保持不變。

Answer 1

如果希望所有鏈接將內容加載到#content ，則可以使用以下方法：

$(document).on('click', 'a', function(){
   $('#content').load(this.href);
});

但這不適用於外部鏈接。

如果所有頁面都具有針對A.html描述的結構，則可以在#content周圍添加另一個div（例如#contentWrapper ），然后使用.load 這樣：

$(document).on('click', 'a', function(){
   $('#contentWrapper').load(this.href + ' #content');
});

如果您無法更改HTML，則可以改用.get並手動替換內容：

$(document).on('click', 'a', function(){
   $('#content').get(this.href, function(data){
       var content = $(data).find('#content').html();
       $('#content').html(content);
   });
});

Answer 2

您將使用jQuery執行類似的操作，以在用戶單擊導航鏈接時使用ajax加載頁面內容。 （您需要先將鏈接添加到菜單中）

$('.nav-header>a').click(function(){

   $('#content').load($(this).attr('href'));

});

如何使HTML頁面的一個區域重定向到另一URL，而頁面的其余部分保持不變？

問題描述

2 個解決方案

解決方案1
2 已采納 2013-09-16 04:21:38

解決方案2
1 2013-09-16 04:06:36

如何使HTML頁面的一個區域重定向到另一URL，而頁面的其余部分保持不變？

問題描述

2 個解決方案

解決方案1 2 已采納 2013-09-16 04:21:38

解決方案2 1 2013-09-16 04:06:36

解決方案1
2 已采納 2013-09-16 04:21:38

解決方案2
1 2013-09-16 04:06:36