Javascript jQuery页面转换_Javascript_Jquery

Javascript jQuery页面转换

javascript jquery

Javascript jQuery页面转换,javascript,jquery,Javascript,Jquery,我有以下几点 <body> <div class="sidebar"></div> <div class="main"> <div class="page-1"> <p>Page 1</p> <button id="btn-page2">Go to Page 2</button> </d

我有以下几点

<body>
    <div class="sidebar"></div>
    <div class="main">

        <div class="page-1">
            <p>Page 1</p>
            <button id="btn-page2">Go to Page 2</button>
        </div>

        <!-- Other Pages --> 
        <div class="page-2">
            <p>Page 2</p>
        </div>

    </div>


</body>


第1页
转到第2页
第2页

我试图遵循jquerymobile的相同原则，将所有页面放在一个HTML文档中

在页面加载时，只应显示类为page-1的div。但是，单击id为btn-page2的按钮时，应显示第二页而不是第一页

我想我可以在带有display:block as属性的可见页面上添加一个.active页面类

但是，我也希望能够顺利地从底部滑动第二页

有什么建议吗

你可以看看这个博客

这演示了使用css3添加幻灯片页面效果的方法

您可以使用相同的概念将页面从下到上滑动。

您可以创建一个css3类，该类将从底部滑动任何页面，并根据单击的按钮将其添加到页面div中。

您尝试过什么吗？如我所说。我添加了一个活动类来显示活动页面。因此，在加载时，第1页将获取活动类。单击btn-page2，第2页获得活动类，我从第1页删除活动类。我还想动画这一点，第2页是滑动顺利了。