注意上述 红色方框   这个是锚点的变相  以及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. 【NOIP2002】矩形覆盖 DFS

    首先,我喜欢愤怒搜索,因为尽管说K<=4,的确K小于或等于3的. 当然某些K<=3还600ms的我就不加评论了. 好吧,可是怎么搜呢?我们考虑到矩形数量非常少,所以能够怒搜矩形. 一些神做 ...

  2. 傻瓜式破解linux--rootpassword

    破password的方法: 方法1.单用户模式改动 (表示进入到单用户模式) .按回车键.按b键启动.进入单用户模式,进行password改动.重新启动 init 5 口诀:e2e 空格1 回车b 开 ...

  3. Python3.4 邮件(包含附件与中国)

    import smtplib import os from email.mime.text import MIMEText from email.mime.multipart import MIMEM ...

  4. C# Windows Phone 8 WP8 , 文字超连结到网页 免打程式码，Xaml就搞定 ! !

    原文:C# Windows Phone 8 WP8 , 文字超连结到网页 免打程式码,Xaml就搞定 ! ! 一般我们在开发Windows Phone 8 APP ,有时会需要超连结连到其他的网页,但 ...

  5. 《Java程序书面采访猿收藏》之 instanceof的作用是什么

    instanceof它是Java二元运算语言,它的作用是推断对象变量引用被指向的类型是一类(或接口.抽象类.父亲)示例.即,对象是否是它的一个实例离开它的类的权.返回boolean数据类型. 常见的使 ...

  6. hdu 2899 hdu 3400 三分/几何

    hdu2899 : 水提,直接三分,事实上求导后二分也能够. #include<iostream> #include<cstdio> using namespace std; ...

  7. offsetTop和scrollTop差异

    最近写组件,这两个属性的结果搞的有点晕,我检查的文件及资料,这两个性质如下面总结: 他一直在offsetLeft.offsetTop,scrollLeft.scrollTop这些方法都是非常迷茫,花一 ...

  8. AND信号灯和信号灯集-----同步和互斥解决面向对象(两)

    AND信号 互斥的上述处理,它是针对仅在进程之间共享的一个关键资源方面.在一些应用.这是一个过程,需要在为了自己的使命后,获得两个或多个其他共享资源运行. 个进程A和B.他们都要求訪问共享数据D和E. ...

  9. 使用bootbox.js（二级务必提交书面和数字到数字中国）

    页面文件 <#-- 页头 --> <#assign currNav = "deposit"> <#assign title="网校充值&qu ...

  10. Apple Watch 1.0 开发介绍 1.3 简介 WatchKit App 架构

    WatchKit app和WatchKit extension一起实现了app的界面.当用户在Apple Watch中操作时,WatchKit app从storyboards中选择合适的场景.比如,如 ...