如何使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