利用   锚点原理 以及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. ubuntu软件中心崩溃

    网上找了下别人的解决方法(本人測试成功解决此问题): 提示说是lists出错 我的正是这样的情况 使用例如以下命令能够修复: 1.删除lists sudo rm /var/lib/apt/lists/ ...

  2. Codeforces Round#297 div2

    B: 题意:给定一个字符串,然后给定m个数字 对于每个数字ai的含义是,将ai到n-ai+1的字符串给翻转一遍. 要求输出m次翻转之后的字符串. 想法就是判断第i个位置的字符是翻转了奇数次,还是偶数次 ...

  3. Java的Log系统介绍和切换（转）

    Java的log系统比较繁杂.在这里梳理一下.本文只涉及log系统介绍和处理log系统之间的切换.不涉及如何配置和使用. 具体的log系统 Log4j:准确的说是log4j 1.x版.是之前使用最广泛 ...

  4. iOS设备定位

    一.iOS谈到定位 1.SignInSignOutViewController.h @interface SignInSignOutViewController : UIViewController& ...

  5. Oracle SQL Lesson (10) - 使用DDL语句创建和管理表

    数据库对象TableViewSequenceIndexSynonym 对象名称最长30个字符,不能与当前用户下其他对象重名.create table "select" as sel ...

  6. uva 11427 - Expect the Expected(概率)

    题目链接:uva 11427 - Expect the Expected 题目大意:你每天晚上都会玩纸牌,每天固定最多玩n盘,每盘胜利的概率为p,你是一个固执的人,每天一定要保证胜局的比例大于p才会结 ...

  7. linux挂载U盘，及乱码问题解决

    1. 首先使用切换到root用户. 2. 使用fdisk -l命令查看磁盘信息,找到u盘(能够依据显示的大小确定) 3. 在/mnt下创建挂载点,比如创建usb目录:mkdir /mnt/usb 4. ...

  8. xshell联系CentOS6.5 iptables要么ls 乱码输出

    今天Xshell 联系CentOS6.5.当终端>编码设置为:Unicode(UTF-8)时刻,跑service iptables restart输出是乱码命令:当编码被设置为:当默认语言.ls ...

  9. 使用python+django+twistd 开发自己的操作和维护系统的一个

    许多开源操作系统和维护系统,例nagios.zabbix.cati等等,但是,当他们得到的时间自己的个性化操作和维护需求,始终无力! 最近的一项研究python.因此,我们认为python+djang ...

  10. 深入浅出JMS（一）——JMS简要

    假设手机只能实时通话.没有邮件和短信功能发生?一个电话回来.只是没有足够的时间去连接.然后传递这款手机的信息肯定是不接受. 么不能先将信息存下来.当用户须要查看信息的时候再去获得信息呢?伴随着这个疑惑 ...