Question

我制作了自己的自定义标签内容脚本，效果很好。唯一缺少的是能够预订不同的部分。

我知道URL需要以某种方式重写。目前我正在使用preventDefault来停止页面刷新，这也会阻止URL更改。

我也试过手动重写URL，但没有任何反应，因为我猜它需要某种形式的钩子来检测输入的URL。

先谢谢你，亨利。

编辑：Javascript：http://pastebin.com/1yhzxkUi HTML：http://pastebin.com/WH1CbRZJ

Answer 1

如果您正在谈论更改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();
    }
});

Answer 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;

如果您想获得查询字符串参数（所以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。当我们单击它，将其标记，向后或向前添加时，哈希变换将始终触发： - ）

Answer 3

你总是可以检查这个插件：jQuery BBQ（后退按钮和查询）添加一个#hash来加入书签，就像Facebook一样。

Answer 4

使用哈希链接允许可收藏/可共享的链接触发JavaScript代码，而不是重新加载页面。 Ben Almans jQuery hashchange event允许您将事件处理程序绑定到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 =红色

进入以下JavaScript对象：

对象{company = undefined，page =“items”，color =“red”}

然后，只需在所选元素上运行jQuery的show（）或hide（）函数。

这可以转换为非jQuery JavaScript，但是你会失去Ben Alman提供的功能，这对便携式解决方案至关重要。

使jQuery可收藏（即 - 用于内容滑块）

4 个答案: