Question

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

这是我目前所拥有的jsfiddle。

（注意：小提琴的框架保持默认为Mootools ...请重置为JQuery UI。）

我的网页结构如下：

<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）并从中取出名称（“1”）。现在它模拟元素锚点上的click（例如a.one）。当然，在之后，您可以对事件进行约束。

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

如何为不同的Jquery函数创建永久链接？

1 个答案: