overflow之锚点技术实现选项卡

最新推荐文章于 2020-12-01 09:33:52 发布

转载最新推荐文章于 2020-12-01 09:33:52 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xfz1987/p/5650300.html

本文介绍如何使用简单的锚点技术实现页面上的选项卡及轮播效果，仅需少量CSS和HTML代码即可完成，适用于单屏页面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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