在线演示地址如下：

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. opencv学习笔记1

    #对图像的像素处理#法1print("------------------------")image = cv.imread("D:/1.jpeg",cv.IM ...

  2. shell-006：检测80端口的存活情况

    注意细节问题,如下图所示 #!/bin/bash # 检测80端口是否存在 while : do n=`netstat -lnpt |grep ':80 ' |wc -l` if [ $n -eq ] ...

  3. GDI绘图写的简单扫雷

    由于没话多少时间,这个扫雷我只实现了主要功能(扫雷功能,递归实现) 废话不多说,直接上代码 using System; using System.Collections.Generic; using ...

  4. R语言批量生成变量(变量名中含有参数)

    我们经常会需要生成这样一类的变量,比如a1,a2,a3...... 这时候我们需要用到这两个函数:get()和assign() get()用法 get()函数只是在环境中搜索该变量名的变量,如果该变量 ...

  5. Training set,Gallery set 和Probe set的区别

    这段时间看了CVPR2017的这篇论文”SphereFace:Deep Hypersphere Embedding for Face Recognition" 里面有提到Probe set, ...

  6. 基于Map的用户注册、登录、抽奖系统

    期望功能 方法设计 1.类的设计: 定义两个参与者的属性: private String username; private String userpassword; 2.注册方法: public v ...

  7. vue dev 环境下的跨域访问

    概述:被dev环境下的跨域弄晕了好几天,build环境还在研究中 1.config--->index.js---->module.exports---->dev 2.在main.js ...

  8. 关于表格合并span-method方法的补充(表格数据由后台动态返回)

    之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很 ...

  9. 用Verilog语言设计一个3-8译码器

    case语句 if_case语句 源码下载 Github >>

  10. Java 继承初探

    Java继承的基础 Java中,被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) 继承一个类,只需要用关键字 extends 把一个类的定义合并到另一个类中就可以了. 例子中 ...