如何为不同的Jquery功能创建永久链接？

Question

我是Jquery的新手，想要弄清楚一些简单的事情。我有几个div点击各种链接时显示/隐藏。我希望能够为每个div提供固定链接，以便用户可以重新加载页面，而不必导航回他们正在查看的div。

这是我到目前为止的jsfiddle。

（注：小提琴框架一直默认为Mootools的......请重置JQuery用户界面。）

我的页面的结构是这样的：

<div style="width:100%; height:40px; text-align:center;"> 
<a class="one" href="#">One</a> 
<a class="two" href="#">Two</a> 
<a class="three" href="#">Three</a> 
<a class="four" href="#">Four</a> 
</div> 
<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div> 
<div id="four">Four</div> 

与jQuery脚本，看起来像这

$('a.one').click(function() { 
$("#one").show('slide', { 
    direction: 'right'}); 
$("#two:visible, #three:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.two').click(function() { 
$("#two:hidden").show('slide', { 
    direction: 'right'}); 
$("#one:visible, #three:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.three').click(function() { 
$("#three:hidden").show('slide', { 
    direction: 'right'}); 
$("#one:visible, #two:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.four').click(function() { 
$('#four:hidden').show('slide', { 
    direction: 'right'}); 
$("#one:visible, #two:visible, #three:visible").hide('slide', { 
    direction: 'left'}); 
}); 

Answer 1

推出主播：<a class="one" href="#one">One</a>

现在在JS你可以这样做：

$(document).ready(function(){ 
    hash = location.hash 
    if(hash) { 
     name = hash.substr(1) 
     $('a.'+name).click(); 
    } 
}); 

这样做：一旦页面加载，它会检查散列（例如， #one）并从中取出名称（“one”）。现在它在元素锚点上模拟click（例如a.one）。当然，你在之后做了这个你已经绑定了你的事件。

注意：很多jQuery事件都有一个“getter”和“setter”行为：如果没有参数调用，它将返回值/触发事件/ etc。同时传递一个值将分配一个新的值/事件函数/等。详细信息请查阅链接文档。