基于锚点定位和overflow的选项卡

如果在不考虑使用JS插件或者Query的情况下，基于锚点定位和overflow的选项卡，废话不多说，直接上代码，大家一看就明白
效果图

CSS代码

<style type="text/css">
.container{margin:30px auto;width:500px;height:250px;}
.container .tab_head{height:40px;background: #eee;text-align: center;
}
.container .tab_head a{line-height:30px;margin:5px;display:block;float:left;
}
.container .tabs_cont {width:498px;height:238px;border: 1px solid #eee;overflow: hidden;
}
.container .tabs_cont .cont_page{padding:10px;width:100%;height:238px;overflow-y:auto;
}
</style>

HTML代码

<div class="container"><div class="tab_head"><a class="click" href="#one">热点</a><a class="click" href="#two">体育</a><a class="click" href="#three">经济</a><a class="click" href="#four">娱乐</a></div><div class="tabs_cont"><div class="cont_page" id="one"><h4>白种人——上帝的骄子！</h4><p>去年暑假到上海，在一路电车的头等里，见一个大西洋人带着一个小西洋人，相并地坐着。我不能确说他俩是英国人或美国人；我只猜他们是父与子。那小西洋人，那白种的孩子，不过十一二岁光景，看去是个可爱的小孩，引我久长的注意。他戴着平顶硬草帽，帽檐下端正地露着长圆的小脸。白中透红的面颊，眼睛上有着金黄的长睫毛，显出和平与秀美。我向来有种癖气：见了有趣的小孩，总想和他亲热，做好同伴；若不能亲热，便随时亲近亲近也好。在高等小学时，附设的初等里，有一个养着乌黑的西发的刘君，真是依人的小鸟一般；牵着他的手问他的话时，他只静静地微仰着头，小声儿回答——我不常看见他的笑容，他的脸老是那么幽静和真诚，皮下却烧着亲热的火把。我屡次让他到我家来，他总不肯；后来两年不见，他便死了。我不能忘记他！我牵过他的小手，又摸过他的圆下巴。但若遇着蓦生的小孩，我自然不能这么做，那可有些窘了；不过也不要紧，我可用我的眼睛看他——一回，两回，十回，几十回！孩子大概不很注意人的眼睛，所以尽可自由地看，和看女人要遮遮掩掩的不同。我凝视过许多初会面的孩子，他们都不曾向我抗议；至多拉着同在的母亲的手，或倚着她的膝头，将眼看她两看罢了。所以我胆子很大。这回在电车里又发了老癖气，我两次三番地看那白种的孩子，小西洋人！ </p><p>初时他不注意或者不理会我，让我自由地看他。但看了不几回，那父亲站起来了，儿子也站起来了，他们将到站了。这时意外的事来了。那小西洋人本坐在我的对面；走近我时，突然将脸尽力地伸过来了，两只蓝眼睛大大地睁着，那好看的睫毛已看不见了；两颊的红也已褪了不少了。和平，秀美的脸一变而为粗俗，凶恶的脸了！他的眼睛里有话：“咄！黄种人，黄种的支那人，你——你看吧！你配看我！”他已失了天真的稚气，脸上满布着横秋的老气了！我因此宁愿称他为“小西洋人”。他伸着脸向我足有两秒钟；电车停了，这才胜利地掉过头，牵着那大西洋人的手走了。大西洋人比儿子似乎要高出一半；这时正注目窗外，不曾看见下面的事。儿子也不去告诉他，只独断独行地伸他的脸；伸了脸之后，便又若无其事的，始终不发一言——在沉默中得着胜利，凯旋而去。不用说，这在我自然是一种袭击，“出其不意，攻其不备”的袭击！ </p> </div><div class="cont_page" id="two"><h4>背影</h4><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p></div><div class="cont_page" id="three"><h4>动乱时代</h4><p>这是一个动乱时代。一切都在摇荡不定之中，一切都在随时变化之中。人们很难计算他们的将来，即使是最短的将来。这使一般人苦闷；这种苦闷或深或浅的笼罩着全中国，也或厚或薄的弥漫着全世界。在这一回世界大战结束的前两年，就有人指出一般人所表示的幻灭感。这种幻灭感到了大战结束后这一年，更显著了；有我们中国尤其如此。 </p><p>中国经过八年艰苦的抗战，一般人都挣扎的生活着。胜利到来的当时，我们喘一口气，情不自禁的在心头描画着三五年后可能实现的一个小康时代。我们也明白太平时代还遥远，所以先只希望一个小康时代。但是胜利的欢呼闪电似的过去了，接着是一阵阵闷雷响着。这个变化太快了，幻灭得太快了，一般人失望之余，不由得感到眼前的动乱的局势好像比抗战期中还要动乱些。再说这动乱是世界性的，像我们中国这样一个国家，大概没有足够的力量来控制这动乱；我们不能计算，甚至也难以估计，这动乱将到何时安定，何时才会出现一个小康时代。因此一般人更深沉的幻灭了。</p> </div><div class="cont_page" id="four"><h4>荷塘月色</h4><p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p><p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。 </p><p>路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p><p>曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。 </p></div></div>
</div>

总结
其实原理很简单；就是利用了HTML的锚点，固定DIV容器的大小尺寸就好了，利用overflow:hidden作用。

DEMO原型加入Q群149663025下载，原型代码存放在（组件开发和demo）文件夹下；

更多分享关注微信公众号

基于锚点定位和overflow的选项卡相关推荐

微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
标签有关用法以及锚点定位；
一.页面内的锚点定位: 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转: 1.单向定位: 锚定定位实在页面必须要发生滚动的情况下,不滚动也能发 ...
mui 实现a锚点定位 (demo演示)【建议：仅作为参考】
mui 实现<a>锚点定位(演示) - [建议:仅作为参考] 更改了js部分的源码class类名,可对比官方代码,匹配学习. 重要说明: 本案例,改编自"官方demo演示地址 · ...
mui组件 a 锚点定位（Demo案例演示）- 代码篇
文章目录 `从踩坑,入坑,到跳出坑`:mui框架(在mui-scroll中如何进行页内锚点跳转) `那么,用什么方法实现锚点跳转?` `思路就是:` - 我们可以使用另外一种MUI组件,即:`(顶部选 ...
移动端html锚点,vue实现锚点定位，移动端同样适用
本来首先想到的就是用a链接进行锚点跳转,但是a链接会产生新的路由,为了防止对项目产生影响就使用了js进行操控滚动条的滑动,下面是一个小demo! 一.html代码 {{item}} {{item}}/ ...
H5使用vant并根据首字母处理数据锚点定位
html部分: <van-fieldv-model="detailInfo.usedCarCity"type="text"label="订单成交 ...
vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue页面实现锚点定位
html代码: <div @scroll="scrollEvent">/****目录部分***/<ul class="titless"> ...

基于锚点定位和overflow的选项卡

基于锚点定位和overflow的选项卡相关推荐

最新文章

热门文章