1

我正在使用 Codeigniter 开发 CMS 后端。也许不清楚用文字来说明我的问题。所以我用一些简单的html代码来表达我的问题：有一个html页面叫做A.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>

我知道当我单击 . 时我们可以使用 jQuery 的负载来更改#content' 的内容nav-header。但我的问题是我如何才能在内容区域 ( #content) 中进行内容更改，而当我单击内容区（#content）。我试过了iframe，但它使页面更复杂，我不喜欢它。谢谢。

更新： 另一个例子：例如，我点击“新闻列表”菜单项，然后#content更改为显示新闻列表。现在我点击“添加新闻”链接中的#content，如何使#content区域显示添加新闻表单，而页面的其余部分保持不变。

4

2 回答 2

2

如果您希望所有链接都将内容加载到#content中，可以使用以下命令：

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

但这不适用于外部链接。

如果您的所有页面都具有您为 A.html 描述的结构，您可以在周围添加另一个 div #content（例如，#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);
   });
});
于 2013-09-16T04:21:38.820 回答
1

当用户单击导航链接时，您可以使用 jQuery 执行类似的操作以使用 ajax 加载页面内容。（您需要先在菜单中添加链接）

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

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

});
于 2013-09-16T04:06:36.650 回答