HTML page
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Basic Structure </title>
<meta name= "viewport" content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel= "stylesheet" href= "Css/style.css"/>
<body>
<div class= "container" id= "container" >
<section id= "section" >
<!--level Start Page-
<div id= "TAB1" > First page
<a href= "#list1" > Point I jump to the first page of level two page </a>
<!--<a href= "c.html" > Point me </a>--
</div>
<div id= "TAB2" > second page
<a href= "#list2" > Point I jump to page two of the second page </a>
</div>
<div id= "TAB3" > third page
<a href= "#list3" > Point I jump to page two of Page three </a>
</div>
<div id= "TAB4" > Fourth page
<a href= "#list4" > Point I Jump to page Fourth of level two </a>
</div>
<!---level page End-
<!--level Two page start-
<div id= "List1" >
I am the content of the first page of level two page
<a href= "#content1" > Point I jump to the first page of level three page </a>
</div>
<div id= "List2" >
I am the content of the second page level two page
<a href= "#content2" > Point I jump to page three of the second page </a>
</div>
<div id= "List3" >
I am the content of level two page of the third page
<a href= "#content3" > Point I jump to Page three of Page three </a>
</div>
<div id= "List4" >
I am the content of Level two page on page fourth
<a href= "#content4" > Point I Jump to page Fourth of level three </a>
</div>
<!--level Two page end-
<!--level Three page start-
<div id= "Content1" >
I am the content of the first page of level three page
</div>
<div id= "Content2" >
I am the content of the second page level three page
</div>
<div id= "Content3" >
I am the content of level three page of the third page
</div>
<div id= "Content4" >
I am the content of Level three page on page fourth
</div>
<!--level Three page end-
</section>
<footer id= "Footer" >
<nav>
<a href= "#tab1" > First </a>
<a href= "#tab2" > Second </a>
<a href= "#tab3" > Third </a>
<a href= "#tab4" > Fourth </a>
</nav>
</footer>
</div>
<script src= "Js/zepto.js" ></script>
<script src= "Js/index.js" ></script>
</body>
JS file
①index.js
$ (function () {
$ ("#container"). On ("click", "a[href]", function (e) {
E.preventdefault ();//Cancel the default behavior of a JS block link jump
Get the ID value of the tab that you clicked on
var id=$ (this). attr ("href");
Console.log (ID);
$ (ID). CSS ({
'-webkit-transform ': ' Translate3d (0,0,0) ',
'-webkit-transition ': ' Transform 300ms '//Set animation time
}). siblings (). CSS ({
"Left", "100%"
'-webkit-transform ': ' Translate3d (100%,0,0) ',
'-webkit-transition ': ' Transform 300ms '//Set animation time
});
})
})
② introduction of Zepto.min.js
CSS file
@import "M_reset.css";
Contents of the Package
. 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;//Define a flexible box
-webkit-box-orient:vertical;//Set the Flex box to 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;
}
}
Topic section
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);
Show first page by default
&: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;
}
}
}
App Template Framework
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
