0

我有 4 页内容，我想在当前/主页上打开它们。所有这些页面都需要滑入。例如，一旦单击关于我们，它将滑入，单击另一个链接时，前一页将滑出，新页面将滑入。单击主页链接后，任何加载的页面都需要滑出。

我在这里添加了一个插图

插图

这是我要建立的网站 http://www.beautydishphotography.com。

目前，所有链接内容都是从页面本身上的 DIV 加载的，我正在尝试将这些内容放入外部 HTML 文件中，并在单击菜单按钮时将它们滑入/滑出。

这是我当前的 HTML 代码。

<html>
<head>
    <title>Test Div</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <nav> 
    <div id='menu'> 
    <a href='#'><img src='img/Navigation/home.png' title='Home' alt='' /></a>
    <a href='aboutus.html'><img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' /></a> 
    <a href='portfolio.html'><img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' /></a>
    <a href='contactus.html'><img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /></a>
     </div>
  </nav>
  <div style="clear:both"></div>
  <div id="externalPage" style="height:900px; width:900px; background-color:#999; display:none;">Contact Us</div>
</body>
</html>

我还放置了一个 #externalPage div，它可能需要加载外部 .html 文件。

我对 jQuery 很陌生，真的很难做到。请让我知道我该怎么做。

4

1 回答 1

2

将您的内容加载到屏幕外或不可见div，然后就位。您还可以相应地更改类名，从而将所有样式应用于您引入的..animate()divdiv

GitHub 上的人不久前实现了这个想法： https ://github.com/blog/760-the-tree-slider

于 2013-06-06T16:46:59.600 回答