在线演示地址如下：

http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab简洁版</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_贰</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>

纯CSS实现Tab切换标签效果代码的更多相关文章

  1. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  4. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  5. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  6. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  7. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  8. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  9. 纯css实现tab导航

    仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...

随机推荐

  1. C++20草案中的宇宙飞船运算符(<=>,spaceship operator)

    C++20草案中的宇宙飞船运算符(<=>,spaceship operator) Herb Sutter提议的新三路运算符<=>已经被合入C++20草案中. 宇宙飞船运算符(h ...

  2. jenkins官方文档（中文版）

    https://www.w3cschool.cn/jenkins/

  3. ansible基本模块-shell

    ansible  XXX  -m shell -a   "XXX"

  4. STM32F0 中 ADC 多通道转换结果相同的问题

    前言 前段时间调试 STM32F030 的 ADC,在多通道转换时遇到了奇怪的问题,使用官方的例程和库函数连续转换多个 ADC 通道,得到的几个通道的结果是一样的,解决办法参考了 关于STM32F0系 ...

  5. Android 线程+Handler的使用

    1.介绍 2.线程的使用 (1)启动 (2)执行 3.xml布局 <?xml version="1.0" encoding="utf-8"?> &l ...

  6. table中thead固定一直在最上面

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...

  7. React组件Components的两种表示方式

    函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...

  8. HDU6464 (权值线段树)-（查找区间第k1小于第k2小之间的和）

    http://acm.hdu.edu.cn/showproblem.php?pid=6464 不理解先看博客:https://blog.csdn.net/g21glf/article/details/ ...

  9. BZOJ - 2115 独立回路 线性基

    题意:给定一个图集\((V,E)\),求路径\(1...n\)的最大异或和,其中重复经过的部分也会重复异或 所求既任意一条\(1...n\)的路径的异或和,再异或上任意独立回路的组合的异或和(仔细想想 ...

  10. 有关eval用法的小结

    首先要明白eval.这个是可以把字符串代码,直接当做js运行.比如 var ss="alert(1);";这个时候ss保存的是文本. 使用 eval(ss);这样就相当于,执行了s ...