Question

我在这个领域是绿色的，我正在努力学习，同时我为一个网站建立一个虚拟简历，我可以用来宣传我的编程服务（我的优势在于C＃，Java和类似的语言：＆＃39;）

我认为看起来很酷的东西，就是当你点击我的侧栏中的链接时，页面上的内容会滑出并被新页面上的内容替换，在上一页和＃39;的地方。

我有点迷失在如何实现这一点，如果我必须做每页的事情，或者如果我可以在Javascript中制作一个通用方法来处理它。我使用的是jQuery和bootstrap。

var main;
main = function () {
    $(".sidebar-nav a").click(function() {
        <!-- Not sure what to do here -->
        <!-- Pseudo Code -->
        <!-- find out what element was pressed
             slide out content on current page using animate();
             slide in content from the element that was pressed using animate(); -->
    })
}

$("document").ready(main);

HTML：

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <h1>Brand</h1>
            </li>
            <li>
                <a href="#">
                    Index
                </a>
            </li>
            <li>
                <a href="#">
                    About Me
                </a>
            </li>
            <li>
                <a href="#">
                    Resume
                </a>
            </li>
            <li>
                <a href="#">
                    Contact
                </a>
            </li>
        </ul>
    </div>

    <!-- Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>h1</h1>
                    <h2>h2</h2>
                    <h3>h3</h3>
                    <h4>h4</h4>
                    <h5>h5</h5>
                    <h6>h6</h6>
                    <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
</div>

如果您需要CSS，请告诉我。

Answer 1

您应该使用AJAX技术将其他页面的HTML内容无缝地加载到文档中。

这种情况的最佳选择（在我看来）是jQuery函数load()，因为它的简单性和纯粹的便利性。您还可以发送回调函数，它很容易实现。

然后，您可以使用animation属性轻松实现CSS动画。

单击链接时使内容滑入和滑出？

1 个答案: