基于锚点定位和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）文件夹下；

更多分享关注微信公众号