1

我是 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'});
});
4

1 回答 1

0

介绍锚点：<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”）。现在它模拟点击元素锚点（例如a.one）。当然，您在绑定事件后执行此操作。

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

于 2013-03-14T00:01:47.497 回答