注意上述 红色方框   这个是锚点的变相  以及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. Sql SUBSTR函数

    SUBSTR( ) 从一个字符表达式或备注字段中返回一个字符串.该字符串起始于字符表达式或备注字段的指定位置,到指定数目字符结束. 例如: SUBSTR(“A1”, 1 1]) 结果:A

  2. lightoj1030（期望dp）

    有n个格子,初始的时候pos=1,然后丢骰子,然后新的pos为pos+骰子的点数,走到新的pos,可以捡走该pos上的黄金. 特殊的是,如果新的pos超过了n,那么是不会走的,要重新丢骰子. 所以要分 ...

  3. DSL简介（转）

    DSL编程:有人将DSL编程称之为声明式(Declarative)编程.DSL是在模型之上建立的一种更加灵活的对 模型化的理解和使用方式.语义模型是DSL的核心.内部DSL:用通用语言的语法表示DSL ...

  4. leetcode第一刷_Pow(x, n)

    高速乘方的算法,写了好多变,出了各种错,真是服了我自己了. 思想是每次对n减半,将当前的temp平方.须要注意的是假设当前的n是个奇数,减半之后会丢失掉一次乘积,因此假设当前的n为奇数,应该先在结果里 ...

  5. PHP 类属性 类静态变量的访问

    php的类属性其实有两种,一种是类常量,一种是类静态变量.两种容易引起混淆. 如同静态类方法和类实例方法一样,静态类属性和实例属性不能重定义(同名),但静态属性可以和类常量同名. <?php c ...

  6. android LinearLayout等view如何获取button效果

    我们可以给LinearLayout以及一切继承自View的控件,设置View.onClickListener监听,例如LInearLayout. 但是我们发现LinearLayout可以执行监听方法体 ...

  7. 安装好.net framework后运行慢

    表现 系统有时运行慢,尤其是.net程序运行得相当慢 mscorsvw.exe与mscorsvw.exe *32两个进程挂在任务管理器里时不时地占着CPU 解决 运行以下两条命令,加快这两进程的运行, ...

  8. uip UDPclient模式通信移植,当地port随机

    现在移植UDPclient模式,测试广播地址. //udp_client.c /************************************************************ ...

  9. easyui LinkButton

    http://www.zi-han.net/case/easyui/menu&button.html

  10. Java 抽象工厂模式

    抽象工厂模式(Abstract Factory Pattern)是工厂方法模式的进一步抽象,其英文原话"Provide an interface for creating families ...