使用URL片段确定运行哪个jquery函数

Question

我想链接到（domain.com/page#loadThickBox1）这样的页面，并让它运行jquery函数，默认情况下会加载一个thickbox。我需要运行什么代码才能完成此任务？

例如，这些可能是一些链接：

domain.com/page#loadThickBox1

domain.com/page#loadThickBox2

domain.com/page#loadThickBox3

不喜欢这样：

domain.com/page/loadThickBox1

domain.com/page/loadThickBox2

domain.com/page/loadThickBox3

Answer 1

使用location.hash

$(function() {
    switch( location.hash.replace('#','') ){
    case 'loadThickBox1':
        //do something!
        loadThickBox1();
        break;
    case 'loadThickBox2':
        //do something!
        loadThickBox2();
        break;
    case 'loadThickBox3':
        //do something!
        loadThickBox3();
        break;
    }
});

Answer 2

location.href.split('#')[1]

这将为你提供＃之后的单词。在给定此值的情况下加载相应的框。

Answer 3

您可以收听 hashchange 事件，解析哈希并相应地运行您的函数。

DEMO

function handleHash(hash) {
    var hash = hash.replace('#', '');

    if (!hash) return;

    console.log('Loading thick box ' + hash.slice(-1));
}

window.addEventListener('hashchange', function () {
    handleHash(location.hash);
});

//handle initial hash when page loads
handleHash(location.hash);