利用   锚点原理 以及overflow:hiden 结合，实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a  必须是 name   如果别的   必须是id  可见我下一篇   css Tab选项卡2

//以下是源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Tab 1</title>

<style>
*{margin:0;padding:0;list-style:none;font-size:12px;}

#content{width:300px;margin:10px auto;position:relative;border:1px solid #666;}
ul{width:20px;height:100px;position:absolute;right:5px;top:100px;}
ul li{height:33px;}
ul li a{display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#000;background:#ccc;text-decoration:none;}
ul li a:hover{color:#fff;background:#666;}
#tabTxt{height:300px;overflow:hidden;}
#tabTxt a{width:300px;height:300px; display:block;}
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#a1">1</a></li>
<li><a href="#a2">2</a></li>
<li><a href="#a3">3</a></li>
</ul>

<div id="tabTxt">
<a name="a1" style="background:#f00"></a>
<a name="a2" style="background:#080"></a>
<a name="a3" style="background:#009;"></a>
</div>
</div>

</body>
</html>

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

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

  1. css Tab选项卡

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

  2. css Tab选项卡2

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

  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. 《Javascript高级程序设计》读书笔记之闭包

    闭包 function createComparisonFunction(propertyName) { return function (object1, object2) { var value1 ...

  2. Windows Phone开发（33）：路径之其它Geometry

    原文:Windows Phone开发(33):路径之其它Geometry 上一节中,我们把最复杂的PathGeometry给干了,生剩下几个家伙就好办事了.一起来见见他们的真面目吧. 一.LineGe ...

  3. Percona Data Recovery Tool for InnoDB工具恢复单表的案例

    今天上班有个朋友询问我,相关Percona Data Recovery Tool for InnoDB恢复数据中的一些问题,比如说delete,没法恢复数据,原先做过类似的异常处理就,再次模拟了下相关 ...

  4. OpenCV， color reduction method

    转载请注明出处!!!http://blog.csdn.net/zhonghuan1992 OpenCV, colorreduction method 目标: 这次学习的目标是回答以下的几个问题: 1 ...

  5. NLB+Application Request Route 网路负载均衡

    NLB网路负载均衡管理器详解   序言 在上一篇配置iis负载均衡中我们使用啦微软的ARR,我在那篇文章也中提到了网站的高可用性,但是ARR只能做请求入口的消息分发服务,这样如果我们的消息分发服务器给 ...

  6. 80x86汇编小站站长简单介绍-2014年08月23日

    [序言] 旧版的"80x86汇编小站站长简单介绍"已经过时了, 因此于2013年10月01日花费1个小时又一次更新和排版一次. [人生格言]  1] 一生都用头脑而不是情绪解决这个 ...

  7. 采用jqueryUI创建日期选择器

    该公司的项目使用的插件时间选择,百度很长一段时间.没有找到合适的,而且,他们在看了jqueryUI.自己变成一个更好的集成日期选择器.为了以后遇到相同的问题是可以解决. 以下就贴出部分使用的代码,比較 ...

  8. 安装nodejs搭建ghost个人博客

    记录一下今天在linux下折腾nodejs的过程,相互学习: (不知道为什么用源代码安装,调用npm的时候老是会出现找不到npmlog的 错误,后来换用下了个二进制 来搞,假设那个牛牛知道为什么.希望 ...

  9. 移动应用开发（IOS/android等一下）在一般图像缓存方案评述(附流程图)

    在移动应用开发.我们经常从网络请求到该设备显示遇到的场景图片. 假设多次发动每个请求,废物流.浪费电.: 将图片持久化到磁盘也不失为一种策略:但每次从文件读取图片也存在一定的io开销,就算採用此策略, ...

  10. 《图书管理系统——java》

    /* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名:    < ...