Question

我正在尝试使用jQuery创建一个多页面导航，当我们更改页面时，当前的页面将遭受slideUp（）并消失。

到现在为止我有这个JS：

$(document).ready(function() {

    current = "#div1";

    $("#btn1").click(function() {

        if (current != "#div1") {
            $(current).slideUp("slow");

            current = "#div1";
        }

    });

    $("#btn2").click(function() {

        if (current != "#div2") {
            $(current).slideUp("slow");

            current = "#div2";
        }

    });

    $("#btn3").click(function() {

        if (current != "#div3") {
            $(current).slideUp("slow");

            current = "#div3";
        }

    });

});

在此上运行：http://jsfiddle.net/93gk3oyg/

我似乎无法正确导航从第1页到第3页，第3页到第2页，依此类推......

任何帮助将不胜感激：）

Answer 1

我在某种程度上重构了你的代码。我实际上没有使用滑动功能，所有内容都是使用CSS动画处理的，这意味着您以后可以将其更改为其他内容。另请注意，这意味着您并不需要使用z-index。 HTML：

envp

JS：

execvpe

CSS：

<StackPanel Orientation="Horizontal">
    <Button Content="" Margin="0,0,10,0" VerticalAlignment="Top" />
    <Button Content="Add" Margin="0,0,10,0" VerticalAlignment="Top" />
</StackPanel>

这是小提琴：http://jsfiddle.net/93gk3oyg/9/

使用jQuery slideUp（）动画进行页面导航

1 个答案: