overflow之锚点技术实现选项卡

我们知道通过锚点技术可以实现页面内容的定位，如果我们把这些内容放置在一个容器中，看看我们能做什么。

     

艾玛，选项卡、轮播，有木有，瞬间有种蛋碎的赶脚，以前写个选项卡，破轮播，费了多大的劲儿呀，现在，你只需几行代码甚至是不写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的滚动条