利用   锚点原理 以及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. [置顶] 轻量级语言Lua入门

    作为一个脚本爱好者,而且是脚本(Perl)起家的我,一有空就喜欢学习下这些脚本语言.据说魔兽世界.愤怒小鸟都用到了它,所以今天研究下Lua这个叫法有点奇特的脚本 [转载请注明出处:http://blo ...

  2. JSTL 中<c:forEach>使用

    <c:forEach 详解 博客分类: JSTL   <c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 ...

  3. swift学习一:介绍，开发文档下载

    在今天wwdc2014公布会上.苹果今天公布了全新的编程语言Swift以及新版Xcode.对于开发人员来说,Swift包括了非常多开发人员喜欢的功能,能够与Objective-C和C语言共同工作.Sw ...

  4. Java 执行四则运算

    四种基本的操作原理是将被转换成后缀缀表达式表达.然后计算. 转换思路和原则.可以参考将中缀表达式转化为后缀表达式 import java.math.BigDecimal; import java.ut ...

  5. Red Gate系列之六 SQL Test 1.0.12.3 Edition SQL测试工具 完全破解+使用教程

    原文:Red Gate系列之六 SQL Test 1.0.12.3 Edition SQL测试工具 完全破解+使用教程 Red Gate系列之六 SQL Test 1.0.12.3 Edition S ...

  6. Google Maps Android API v2 (1)- 入门

    才可以开始工作的API,你将需要下载的API,并确保你有一个谷歌地图Android的API V2关键.API和关键是免费提供的. 概观 获得谷歌地图Android的API V2 谷歌地图API密钥 显 ...

  7. 在小发现SQL字符串比较是不是他们的大写和小写敏感

    声明:select  petName from dbo.T_pet order by petName desc 成绩:    petName    An admin A的ascii码小于a,按理说应该 ...

  8. asp.net使用mysql数据库

    Asp.net连接mysql 不推荐使用ODBC,推荐是用mysql官网提供的组件MySQL.Data.Dll,放在bin下面,添加引用即可 下面是封装的几个常用操作 using System; us ...

  9. 在C#环境中动态调用IronPython脚本(一）

    本文讲述用C#调用Ironpython运行环境,解析并运行动态pyhton脚本.这种情况应用在那些需要滞后规定行为的场合,例如,动态计算项(计算引擎),用户可以自定义计算内容.计算公式等. 本文的代码 ...

  10. html 格式的email 编辑

    本篇文章只讲如何编辑html格式的email 模板,并不讲述如何用程序发送email. 1.做email的重要思想:“复古” 抛弃现代化的div+css技术,回到html4.0+table的时代.少用 ...