我的JavaScript中有以下启动;顺便说一下,我一直在使用 github 中显示的代码。完整的代码可以在这里看到
var
/* Application Specific Variables */
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
activeClass = 'active selected current youarehere open',
activeSelector = '.active,.selected,.current,.youarehere, .open',
menuChildrenSelector = '> li,> ul > li',
/* Application Generic Variables */
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
问题在于:
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
并在:
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
当菜单点击.nav
时,必须更改.page-content
。
当在.nav-sub
中点击菜单时,内容必须被替换.tab-content
问题是,两个菜单都更改.page-content
,而不仅仅是选项卡内容或页面内容。
知道如何改变这一点吗?
修复您的内容选择
更改自
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first'
自
contentSelector = '.tab-content, .page-content, .article:first, .post:first'
History.js 没有替换错误的内容;ajaxify-html5.js(你正在使用的脚本)完全按照它的设计做:
-
如果用户单击内部链接(并且该链接没有
no-ajaxy
类),则脚本会拦截该单击,阻止浏览器加载页面,并启动对该页面的 Ajax 请求。请注意,这包括页面上的所有内部链接,而不仅仅是菜单中的链接。
-
当 Ajax 请求完成时,脚本将当前页面上的内容替换为响应中的内容(并执行一些其他聪明的操作,例如在右侧菜单项上设置
activeClass
、更新页面标题并从响应运行脚本)。该脚本使用在
contentSelector
中找到的第一个元素作为"内容"节点。这并不取决于用户单击了哪个链接。
如果只想"ajaxify"菜单链接,可以更改(第 95 行):
$body.ajaxify();
改为在菜单元素上调用.ajaxify()
。
如果要使用新内容更新其他元素,可以更改(第 145 行):
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */
以改为更新另一个元素。