注意上述 红色方框   这个是锚点的变相  以及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. HorizontalScrollView做页卡的一个小记录

    用HorizontalScrollView做页卡,实现一个如下图的效果:

  2. 无法打开登录所请求的数据库 "ASPState"。登录失败。 用户 'NT AUTHORITY/SYSTEM' 登录失败。

    原文:无法打开登录所请求的数据库 "ASPState".登录失败. 用户 'NT AUTHORITY/SYSTEM' 登录失败. 无法打开登录 'ASPState' 中请求的数据库 ...

  3. python学习笔记之11：图像用户界面

    这里会介绍如何创建python程序的图像用户界面(GUI),也就是那些带有按钮和文本框的窗口等.目前支持python的所谓“GUI工具包”的有很多,本文简要介绍最成熟的跨平台pythonGUI工具包- ...

  4. 【C语言的日常实践（十二）】命令行参数

    C计划main函数有两个参数.文章1一个通常被称为argc,它代表的命令行参数的个数. 第2个通常称为argv.它指向一组參数值. 指针数组:这个数组的每一个元素都是一个字符指针,数组的末尾是一个NU ...

  5. CodeForces 52C Circular RMQ（间隔周期段树，间隔更新，间隔总和）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://codeforces.com/problemset/problem/52/C You are g ...

  6. Codeforces 432 D. Prefixes and Suffixes

    用扩展KMP做简单省力..... D. Prefixes and Suffixes time limit per test 1 second memory limit per test 256 meg ...

  7. Coco2dx-3.0中怎样调用LUA

    一个用3.0的工具导出类到lua,自己主动生成代码的方法. 曾经要导出c++类到lua.就得手动维护pkg文件,那简直就是噩梦.3.0以后就会感觉生活非常轻松了. 以下我就在说下详细做法. 1.安装必 ...

  8. asp.net访问网络路径方法(模拟用户登录)

    public class IdentityScope : IDisposable { // obtains user token [DllImport("advapi32.dll" ...

  9. 使用BackgroundWorker组件进行异步操作编程

    本文介绍了BackgroundWorker组件的功能及在基于事件的异步操作编程中的应用,并对组件的实现原理进行简述.在应用程序中,可能会遇到一些执行耗时的功能操作,比如数据下载.复杂计算及数据库事务等 ...

  10. (转)maven设置内存

    Windows环境中 找到文件%M2_HOME%\bin\mvn.bat ,这就是启动Maven的脚本文件,在该文件中你能看到有一行注释为: @REM set MAVEN_OPTS=-Xdebug - ...