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; } } }