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

     

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

overflow之锚点技术实现选项卡的更多相关文章

  1. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  2. URL锚点HTML定位技术机制

    一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...

  3. URL锚点HTML定位技术机制、应用与问题

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...

  4. 深入了解overflow

    1.如果overflow-x与overflow-y值不同   其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto 2.overflow ...

  5. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  6. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  7. 学习android推荐网站

    1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...

  8. 10个学习Android开发的网站推荐

    1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...

  9. 10个很棒的学习Android 开发的网站(转)

    看到江湖旅人 写的<10个很棒的学习iOS开发的网站 - 简书>,所以就忍不住写Android 啦,也希望对大家有帮助.我推荐的网站,都是我在学习Android 开发过程中发现的好网站,给 ...

随机推荐

  1. JavaScript- The Good Parts Chapter 6

    Thee(你) I’ll chase(追逐:追捕) hence(因此:今后), thou(你:尔,汝) wolf in sheep’s array.—William Shakespeare, The ...

  2. javascript的类和构造函数

    在javascript中,类的实现是基于其原型继承机制的.如果两个实例都从同一个原型对象上继承了属性,我们就说它们是同一个类的实例.那么,如果两个对象继承自同一个原型,那基本上可以认为它们是由同一个构 ...

  3. js常用内置对象、Dom对象、BOM对象

    11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置 对象.属性和 ...

  4. layer (jQuery弹出层插件)使用

    $(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...

  5. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  6. Nginx入门之两种handler函数的挂载方式

    请在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 接着上次的文章,今天研究<深入理解Nginx模块开发与架构解析>一书中给出的mytest的例子,发现和 /tengine.t ...

  7. 分布式助手Zookeeper(一)

    分布式助手Zookeeper(一)博客分类: Zookeeper   Zookeeper最早是Hadoop的一个子项目,主要为Hadoop生态系统中一些列组件提供统一的分布式协作服务,在2010年10 ...

  8. HBase中的备份和故障恢复方法

    本文将对Apache HBase可用的数据备份机制和大量数据的故障恢复/容灾机制做简要介绍. 随着HBase在重要的商业系统中应用的大量添加,很多企业须要通过对它们的HBase集群建立健壮的备份和故障 ...

  9. 3 分钟学会调用 Apache Spark MLlib KMeans

    Apache Spark MLlib是Apache Spark体系中重要的一块拼图:提供了机器学习的模块.只是,眼下对此网上介绍的文章不是非常多.拿KMeans来说,网上有些文章提供了一些演示样例程序 ...

  10. iOS之XIB拖拽scrollView

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...