如何使 html 页面的一个区域重定向到另一个 URL,而页面的其余部分保持不变
How to make one area of a html page redirect to another url while the rest part of the page stay same?
我正在使用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
更改为显示新闻列表。现在我点击#content
中的"添加新闻"链接,如何让#content
区域显示添加新闻表单,而页面的其余部分保持不变。
如果您希望所有链接都将内容加载到 #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);
});
});
你可以用jQuery做这样的事情,在用户点击导航链接时使用ajax加载页面内容。(您需要先在菜单中添加链接)
$('.nav-header>a').click(function(){
$('#content').load($(this).attr('href'));
});
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 使用php或javascript从facebook相册URL中删除多余的部分
- Angular JS IE9 Hashbang url rewriting
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 直接下载文件,而不是从window.open(url)
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 通过js在新选项卡中有条件地打开url
- CKFinder 3为所选文件返回错误的URL
- 如何获取不属于我项目的上一页的URL
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 在URL中传递JS对象
- 将纯文本URL转换为可单击链接
- Javascript html每点击一次就会更改url
- 以角度管理动态URL
- Mathias URL shortener
- 如何有效地将游戏数据存储在URL查询字符串中
- 使用带括号的图像URL作为jQuery的背景
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 传递包含'%的参数'在URL中
- 如何在不同的url angularjs上更改类名