我们知道通过锚点技术可以实现页面内容的定位,如果我们把这些内容放置在一个容器中,看看我们能做什么。
艾玛,选项卡、轮播,有木有,瞬间有种蛋碎的赶脚,以前写个选项卡,破轮播,费了多大的劲儿呀,现在,你只需几行代码甚至是不写js就能实现该功能,sorry,有点自我陶醉了,表废话啦,请上车,现在就带你飞.
html
<div class="box"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div> </div> <div class="link" style="margin-bottom:150px;"> <a href="#one" class="click">1</a> <a href="#two" class="click">2</a> <a href="#three" class="click">3</a> <a href="#four" class="click">4</a> </div>
css
.box{ width:300px; height:200px; overflow:hidden; /*other style*/ } .box .list{ width:100%; height:100%; /*other style*/ } #one{background:#ccc;} #two{background:red;} #three{background:blue;} #four{background:green;}
注意:适用场景,页面为单屏页面,否会影响html的滚动条