Javascript 如何创建面包屑和类似Github的移动视图效果

单击github中的面包屑链接将触发目录视图区域转换到子目录。达到这一效果的最佳方式是什么。我正在使用asp.net mvc、jquery、jquery ui和jquery布局插件（）

---

我应该放弃布局插件吗？

好吧，你可以从使用开始。为了让这听起来有点熟悉，让我们以twitter为例：

#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow

散列部分是在（包括）“#”之后的部分。使用

window.location.hash

为我们获取它。然后使用

string.replace（）

删除

#/并以以下内容结束：

search/stackoverflow

然后，如果我们将此值存储为变量并执行
string.split（'/'）
，即按照
/
拆分值，则返回此值：

array = ['search','stackoverflow'];

现在它看起来更像一个面包屑，我们可以用它来制作。如果你在twitter上，它会更像：

site / search / stackoverflow

对于每个面包屑链接，只需进一步添加。如果您有分段URL，则构建链接非常容易：

site                      = mysite.com
site/search               = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow


对于滑动部分，需要拾取“onhashchange”事件，该事件检测哈希值的更改。当您单击包含
href=“#somevalue”
的链接时，该事件总是会发生-请注意href包含“#”。您还注意到，该页面不会出现在任何地方（这就是AJAX magic稍后将发挥作用的地方）

对于现代浏览器，您可以使用jQuery或纯JS检测hashchange：

$(window).on('hashchange',function(){
    //do whatever you want when the hash changes
});

//or

window.onhashchange = function(){
    //do whatever you want when the hash changes
}

对于较旧的浏览器，您必须设置一个计时器来检查
window.location.hash的先前值与当前值

(function timer(prevHash){
    var currentHash = window.location.hash;
    if(prevHash !== currentHash){
        //do whatever you want when the hash changes
    }
    setTimeout(function(){
        timer(currentHash);
    },1000);
}();


使用jQuery
.animate（）
可以实现滑动效果。您可以通过AJAX加载新页面（取决于使用解析的散列确定的页面）、附加加载的页面、滑动内容，然后打开！你完了。如果每个人都知道使时钟转动的齿轮，那么他们就很容易做出决定。
可能的重复