注意上述 红色方框   这个是锚点的变相  以及overflow:hiden结合， 利用  锚点对应 id  ，  也可以实现。 兼容ie6+  适合手机tab 简单   不需要脚本

其实还可以利用 css3：target 实现 ，这里就不多做介绍，原理差不多，都是锚点，兼容ie9+

//以下是源代码   拷贝观察即可

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css Tab 2</title>

</head>

<body>

<style>

#content{ width:400px; height:400px; position:relative; border:1px solid #666;}

#content ul{ margin:0; padding:0; position:absolute; list-style:none;}

#content ul li{ list-style:none;}

#content ul li a{ display:block; color:#CCC; padding:4px;}

.tabContent{ height:400px; overflow:hidden;}

.tabContent div{width:400px; height:400px;}

#tab1{ background:RED;}

#tab2{ background:green;}

#tab3{ background:blue;}

</style>

<div id="content">

<ul>

<li><a href="#tab1">1</a></li>

<li><a href="#tab2">2</a></li>

<li><a href="#tab3">3</a></li>

</ul>

<div class="tabContent">

<div id="tab1">111111</div>

<div id="tab2">22222</div>

<div id="tab3">33333333</div>

</div>

</div>

</body>

</html>
本文地址：http://www.cnblogs.com/surfaces/

css Tab选项卡2的更多相关文章

  1. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

  2. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

  3. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  5. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  6. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  7. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  8. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  9. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

随机推荐

  1. ThinkPHP 连接Oracle的配置写法，（使用Oci扩展而非PDO的写法）

    測试了非常多遍,TP官网根本就没有给出正确的写法,并且网上搜索到的全都是错误的. 跟踪代码.终于找出了正确的配置写法,备份例如以下.(by default7#zbphp.com) 'DB_TYPE' ...

  2. HDU ACM 2586 How far away ？LCA-&gt;并查集+Tarjan(离线)算法

    题意:一个村子有n个房子,他们用n-1条路连接起来,每两个房子之间的距离为w.有m次询问,每次询问房子a,b之间的距离是多少. 分析:近期公共祖先问题,建一棵树,求出每一点i到树根的距离d[i],每次 ...

  3. Hibernate对象持久化框架

    JDBC:(Java Data Base Connectivity)java数据库连接 java.sql包提供JDBC API,可通过它编写訪问数据库的程序代码.当中经常使用的接口和类包含以下内容: ...

  4. C++ 复制功能

    C++ 复制功能 说C++复制功能,它可能不是很熟悉.类中的拷贝构造函数和赋值操作符.可是其实或许我们一不小心就会忽略编译器所做的一些默认操作.引起晦涩的错误.以下分析几种场景: 一.场景一:所有默认 ...

  5. Intel baytrail-t support Linux?

    点击这里查看文章 有空试试---唉... Ubuntu (Linux) on Atom Z3700 Series ASUS Transformer Book T100 is particularly ...

  6. [Elasticsearch] 邻近匹配 (三) - 性能，关联单词查询以及Shingles

    提高性能 短语和邻近度查询比简单的match查询在性能上更昂贵.match查询仅仅是查看词条是否存在于倒排索引(Inverted Index)中,而match_phrase查询则须要计算和比較多个可能 ...

  7. cocos2d-x学习过程中的疑问

    1.一个Scene中不同的层或者有几层Layer是在什么时候设置的? 2.helloWord中init()函数是有谁来调用的? 答:HelloWorld的init函数是在create函数调用后才会调用 ...

  8. 性能是全新的 SEO

    作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...

  9. 【原创】纯OO：从设计到编码写一个FlappyBird （六）

    第五部分请看这里 终于到了最后一个部分了! 这里使用SimpleJudge类来实现Judge接口. 首先是SimpleJudge需要的实例变量: 0.final LinkedList<Pilla ...

  10. 【原创】用Python爬取LeetCode的AC代码到Github

    在leetCode写了105道题高调膜科,考虑搬迁到自己的GitHub上,做成一个解题题库,面试的时候也可以秀一个 但是!但是! leetCode在线IDE的功能不要太舒服,我直接线上A了不少题,本地 ...