我制作了自己的自定义选项卡式内容脚本，效果很好。唯一缺少的是能够为不同的部分添加书签。
我知道 URL 需要以某种方式重写。目前我正在使用 preventDefault 来停止页面刷新，这也阻止了 URL 的更改。
我也尝试过手动重写 URL，但没有任何反应，因为我猜它需要某种形式的钩子来检测输入的 URL。
在此先感谢，亨利。
编辑：Javascript：http://pastebin.com/1yhzxkUi HTML： http: //pastebin.com/WH1CbRZJ
问问题
1304 次
4 回答
2
如果您正在谈论更改 URL 以适应页面上的 AJAX 操作，那么我现在正在做类似的事情。
看看http://www.asual.com/jquery/address/
它是一个 jQuery 插件，当您更改选项卡等时（或者，您可以只更改 URL 而不会影响历史记录），它有助于保持地址导航按钮的工作。
当 URL 在外部（即有人粘贴地址）或内部发生变化时，它具有挂钩的事件。然后您可以从参数中获取值并进行相应更新。
一个简单的使用示例：
// Sets the tabId
$.address.parameter("tabId", tabId);
// Sets up the event to catch the URL parameter
$.address.externalChange(function(event) {
var tabId = $.address.parameter("tabId");
if(tabId){
$("#tab" + tabId).show();
}
});
于 2010-08-03T08:26:17.793 回答
2
要存储页面的历史记录，最流行且功能齐全/受支持的方式是使用 hashchanges。这意味着您yoursite/page.html#page1可以yoursite/page.html#page2跟踪该更改，并且因为我们使用的是哈希，所以它可以被书签和后退和前进按钮拾取。
您可以使用 jQuery History 项目http://www.balupton.com/projects/jquery-history找到绑定到哈希更改的好方法
它还有一个全功能的 AJAX 扩展，允许您轻松地将 Ajax 请求集成到您的状态/哈希中，以将您的网站转换为功能齐全的 Web 2.0 应用程序： http ://www.balupton.com/projects/jquery-ajaxy
他们都在他们的演示页面上提供了很好的文档来解释正在发生的事情和正在发生的事情。
这是一个使用 jQuery History 的示例（取自演示站点）：
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab, hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
还有一个 jQuery Ajaxy 示例（取自演示站点）：
'page': {
selector: '.ajaxy-page',
matches: /^\/pages\/?/,
request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},
response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
如果您想获取查询字符串参数（so yoursite/page.html#page1?a.b=1&a.c=2），您可以使用：
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
因此，请查看这些演示链接以查看它们的实际运行情况，以及所有安装和使用详细信息。
编辑：看到你的代码后，这就是你将它与 jQuery History 一起使用所要做的一切。
改变：
$('.tabbed_content .tabs li a').live('click',
function (e){
e.preventDefault();
switchTab($(this));
});
到：
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
switchTab(state);
});
或者，如果您也打算将 jQuery History 用于其他区域，那么我们希望确保我们只为我们的选项卡而不是所有哈希调用 switchTab：
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
if ( $('.tabbed_content > .content > li[id='+state+']').length ) switchTab(state);
});
我们不再使用 onclick 事件，而是绑定到 jQuery History，因为它会检测 hashchange。这是要理解的最重要的概念，例如，如果我们为站点添加书签然后返回它，我们从未点击过它。因此，我们改为将点击更改为绑定到 hashchange。当我们单击它、添加书签、后退或前进时，hashchange 将始终触发 :-)
于 2010-08-03T09:06:05.193 回答
0
你可以随时查看这个插件：jQuery BBQ (Back Button & query) 添加一个#hash 来添加书签，就像 Facebook 一样。
于 2010-08-03T09:00:37.357 回答
0
使用哈希链接允许可收藏/可共享的链接触发 JavaScript 代码，而不是重新加载页面。Ben Almans jQuery hashchange 事件允许您将事件处理程序绑定到 hashchange 事件，该插件适用于通常不支持此功能的旧浏览器。绑定到 hashchange 的事件处理程序可以读取 url 的哈希部分，并调用任何函数。
// register event handler
function bindHashchange() {
$(window).bind('hashchange', function(event) {
event.preventDefault();
var label = location.hash.substring(1);
handleLabel(label);
});
// trigger event so handler will be run when page is opened first time
// otherwise handler will only run when clicking on hash links
$(window).trigger('hashchange');
}
// read and handle hash part of url
function handleLabel(label) {
if ( label.length > 0 ) {
// using label from url
switchPage(label);
} else {
// use the default label, if no hash link was present
switchPage('start');
}
}
// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
if ( label == 'start ) {
$('div#content').html($('div#start'));
} else if ( label == 'some_other_page' ) {
// do something else
}
}
这个其他事件处理程序可以处理同一 url 中由点 ('.') 分隔的 2 个参数。
function processHash() {
var str = location.hash.substring(1);
var pos = $.inArray('.', str);
var label = '';
var arg = '';
if ( pos > -1 ) {
label = str.substring(0, pos);
} else {
label = str.substring(0);
}
if ( pos > 1 ) {
arg = str.substring(pos+1);
}
if ( label.length == 0 ) {
// the default page to open of label is empty
loadContent('start');
} else {
// load page, and pass an argument
loadContent(label, arg);
}
}
如果使用正则表达式，则可以解析任意字符组合。
var registry = {};
// split on character '.'
var args = label.split(/\./g);
for ( i in args ) {
var arg = args[i];
// split on character '='
var temp = arg.split('=');
var name = temp[0];
var value = temp[1];
// store argument in registry
registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments
这将转换网址：
mysite/#company.page=items.color=red
进入以下 JavaScript 对象：
对象 { company=undefined, page="items", color="red"}
然后只需在您选择的元素上运行 jQuery 的 show() 或 hide() 函数即可。
这可以转换为非 jQuery JavaScript，但是您将失去 Ben Alman 提供的功能，这对于可移植的解决方案至关重要。
于 2010-08-03T09:10:12.500 回答