javascript - 根据点击的 anchor /元素分配 php 变量值

Question

目前，我有三个 div 相互水平滑动。每个 div 都是全宽的。我的标记是这样的:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        $page = 'block1';
        //code to display corresponding content for block 1
    ?>
    <a href="#menu">Go back to menu</a>
</div>

<div id="block2">
    <?php
        $page = 'block2';
        //code to display corresponding content for block 2
    ?>
    <a href="#menu">Go back to menu</a>
</div>

我当前的 slider 完全基于这个 fiddle - http://jsfiddle.net/webtiki/wtvaJ/2/ - 从菜单中发生的事情是，当您单击链接转到 block 2 时，它会先滑过 block 1，然后再滑过 block 2。

现在这应该没问题，但是这个内容很快就会扩展，我担心当 block div 计数超过四个时，滑过看起来不太好在到达第 4 个区 block 之前，所有三个区 block 都先行。

我认为只是获取 anchor 的值并将我的标记更改为如下内容:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        switch ($page) {
            case 'block1':
                //code to display corresponding content for block 1
                break;
            case 'block2':
                //code to display corresponding content for block 2
                break;
        }
    ?>
    <a href="#menu">Go back to menu</a>
</div>

我也考虑过将 anchor 更改为按钮以传递这样的变量

<input type="button" value="block1" onClick="javascript:location.href = '#block1'" />

当然，这会重定向到页面本身 (#block1)，而不是像使用 anchor 时那样滑动

有什么想法吗？谢谢。

Answer 1

这是你想要的吗？ DEMO

变化:

var a = $(this).attr('href');
$('.page').hide();
$(a).toggle('slide');