网站中的页面滑块

现场演示

这非常简单，假设您有一个底部导航，并且#pages DIV第一个子菜单将具有所需的DIV页面：

<div id="pages">  
  <div id="home">HOME PAGE</div>
  <div id="about">ABOUT PAGE</div>
  <div id="products">PRODUCTS PAGE</div>
  <div id="contact">CONTACT</div> 
</div>

<table id="nav">
  <tr>
    <td><a href="#home">HOME</a></td>
    <td><a href="#about">ABOUT</a></td>
    <td><a href="#products">PRODUCTS</a></td>
    <td><a href="#contact">CONTACT</a></td>
  </tr>
</table>

所有你需要的是position:fixed在#nav底部并设置absolute为width和height 100％，您的网页：

#pages > div{
  position:absolute;
  width:100%;
  height:100%;
}
#pages div + div{ // To keep "HOME page" at 0 but push away all other pages
    left:-100%; /* note this */
}

// Style buttons and pages
#home,    a[href="#home"]    {background:#078;}
#about,   a[href="#about"]   {background:#780;}
#products,a[href="#products"]{background:#807;}
#contact, a[href="#contact"] {background:#088;}

#nav{
  position:fixed;
  bottom:0;
  width:100%;
  table-layout:fixed;
}
#nav a{
  display:block;
}

您所需要的只是jQuery的这一小部分：

jQuery(function($){

    function showPage( pageID ){
      var pID = pageID || window.location.hash;
      $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
      $(pID).stop().animate({left:0}, 600);
    }
    showPage();

    $('#nav a').click(function(){
      showPage( $(this).attr('href') );
    });

});

请注意导航锚点与相关页面的锚点名称如何相同ID。现在来解释一下：

$('#nav a').click(function(){

会默认#pagename在网址栏中设置一个哈希，现在我们需要的是一个函数，该函数将通过传递的参数pageIDOR（||）读取目标页面ID （如果没有参数，请window.location.hash从地址栏中读取）。

这样一来，您可以确保如果我cpoy将页面链接粘贴到像这样的朋友：

http://www.example.com/#contact

该showPage();功能触发必带他到所需的页面。

在函数内部，通过使用jQuery:gt()选择器（大于index）简单地将所有其他页面作为目标，确保将首页始终保持在0像素左右：

$('#pages > div:gt(0)').animate({left: '-100%'}, 600); // speaks by itself

而不是我们只定位所需的页面ID并对其进行动画处理。

• 我们是否传递了clicked锚href属性，
• 加载的页面hash在地址栏中是否已有一个。

使用jQuery的另一种方法也很简单

$('#nav a').click(showPage);

但是在我们的函数内部，我们应该等待HASH发生变化，然后才能应用任何动画。为此，setTimeout would be fine:

function showPage(){
  setTimeout(function(){
    $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
    $(window.location.hash).stop().animate({left:0}, 600);
  },100);
}
showPage();