HTML頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本結構</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container" id="container">
<header id="header">頭部</header>
<section id="section">
<!--一級頁面開始-->
<div id="tab1">第一頁
<a href="#list1">點我跳向第一頁的二級頁面</a>
<!-- <a href="c.html">點我</a> -->
</div>
<div id="tab2">第二頁
<a href="#list2">點我跳向第二頁的二級頁面</a>
</div>
<div id="tab3">第三頁
<a href="#list3">點我跳向第三頁的二級頁面</a>
</div>
<div id="tab4">第四頁
<a href="#list4">點我跳向第四頁的二級頁面</a>
</div>
<!--一級頁面結束-->
<!--二級頁面開始-->
<div id="list1">
我是第一頁的二級頁面的内容
<a href="#content1">點我跳向第一頁的三級頁面</a>
</div>
<div id="list2">
我是第二頁的二級頁面的内容
<a href="#content2">點我跳向第二頁的三級頁面</a>
</div>
<div id="list3">
我是第三頁的二級頁面的内容
<a href="#content3">點我跳向第三頁的三級頁面</a>
</div>
<div id="list4">
我是第四頁的二級頁面的内容
<a href="#content4">點我跳向第四頁的三級頁面</a>
</div>
<!--二級頁面結束-->
<!--三級頁面開始-->
<div id="content1">
我是第一頁的三級頁面的内容
</div>
<div id="content2">
我是第二頁的三級頁面的内容
</div>
<div id="content3">
我是第三頁的三級頁面的内容
</div>
<div id="content4">
我是第四頁的三級頁面的内容
</div>
<!--三級頁面結束-->
</section>
<footer id="footer">
<nav>
<a href="#tab1">第一個</a>
<a href="#tab2">第二個</a>
<a href="#tab3">第三個</a>
<a href="#tab4">第四個</a>
</nav>
</footer>
</div>
<script src="js/zepto.js"></script>
<script src="js/index.js"></script>
</body>
</html> JS檔案
①index.js
$(function(){
$("#container").on("click","a[href]",function(e){
e.preventDefault();//取消a的預設行為 js阻止連結跳轉
//擷取點選的那個tab的id值
var id=$(this).attr("href");
//console.log(id);
$(id).css({
\'-webkit-transform\':\'translate3d(0,0,0)\',
\'-webkit-transition\':\'transform 300ms\' //設定動畫時間
}).siblings().css({
//"left","100%"
\'-webkit-transform\':\'translate3d(100%,0,0)\',
\'-webkit-transition\':\'transform 300ms\' //設定動畫時間
});
})
}) ②引入zepto.min.js
CSS檔案
@import "m_reset.css";
//封裝的内容
.wh(@w,@h){width:@w; height:@h;}
.b(@b){background: @b;}
.lh(@lh){line-height: @lh;}
.r{position: relative;}
.a{position: absolute;}
.f{position: fixed;}
.box(@dir:vertical){
display: -webkit-box;
-webkit-box-orient:@dir;
-webkit-box-flex:1;
}
html{font-size: 62.5%;}
.container,html,body{.wh(100%,100%)}
.container{
.wh(100%,100%);
display:-webkit-box;//定義一個彈性盒
-webkit-box-orient:vertical;//将彈性盒設定為垂直
header{
.wh(100%,4rem);
.b(red);
//box-shadow: 0 1px 1px rbga(0,0,0,0.8);
text-align: center;
.lh(4rem);
color:#fff;
}
}
//主題部分
section{
-webkit-box-flex:1;
.wh(100%,100%);
//overflow:scroll;
overflow:hidden;
.r;
//text-align: center;
//-webkit-box-pack:center;
//-webkit-box-align:center;
&>div{
.wh(100%,100%);
.a;
.b(#f1f0f6);
//left:100%;
-webkit-transform:translate3d(100%,0,0);
//預設顯示第一頁
&:nth-child(1){
//left: 0;
-webkit-transform:translate3d(0,0,0);
}
}
}
footer{
.wh(100%,4rem);
.b(yellow);
nav{
//display: -webkit-box;
//height: 50px;
.box(horizontal);
a{
display: block;
-webkit-box-flex: 1;
text-align: center;
.lh(4rem);
color: black;
}
}
}