zoukankan      html  css  js  c++  java
  • 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的滚动条

  • 相关阅读:
    Java异常
    docker安装和介绍(基于centos 7)
    centos7搭建gitlab版本控制系统
    webstorm快捷键使用
    Extjs-note
    mak iso
    windows上的硬盘挂载到linux上的步骤方法
    【JAVA笔记——术】JSP中乱码问题的解决方法
    PHP获得IP方式
    ubuntu安装hadoop 若干问题的解决
  • 原文地址:https://www.cnblogs.com/xfz1987/p/5650300.html
Copyright © 2011-2022 走看看