在线演示地址如下：

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. php 百万级数据文件导出

    背景:最近一个需求是从mysql里面读取数据(有点大),然后导出为csv文件 问题 :发现导出的过程中自己中断了,没有报错 . 第一反应是测试导出一个小一点的数据(少查几条),发现没问题 . 查看导出 ...

  2. ASP.Net一般处理程序Session用法

    1.在aspx和aspx.cs中,都是以 Session["type"]="aaa" 和 string aaa=Session["type" ...

  3. composer 创建自己包

    服务器环境下创建自己的项目文件 初始化composer 打开cmd 窗口,cd 到 backrestore 执行 composer init 命令 D:\phpStudy\WWW\backrestor ...

  4. 洛谷 P2518 [HAOI2010]计数 (组合数)

    题面 luogu 题解 本来想练数位dp的,结果又忍不住写了组合数.. 去掉一个\(0\)可以看作把\(0\)移到前面去 那么题目转化为 \(n\)有多少个排列小于\(n\) 强制某一位比\(n\)的 ...

  5. win10 oracle11g安装问题：INS-13001环境不满足最低要求

    打开database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用记事本打开,增添下面内容: <OPERATING_SYSTEM RELEASE="6.2 ...

  6. POJ_3069 Saruman's Army 【贪心】

    一.题面 POJ3069 二.题意分析 我的理解是,可以在每个点设置一个监测点,能够监测到范围R内的所有其他点,那么问给出N个点的一维位置,需要在其中挑多少个监测点把所有点都监测到. 贪心解决: 1. ...

  7. Codeforces - 617E 年轻人的第一道莫队·改

    题意:给出\(n,m,k,a[1...n]\),对于每次询问,求\([l,r]\)中\(a[i] \ xor \ a[i+1] \ xor \ ...a[j],l<=i<=j<=r\ ...

  8. UESTC - 1652 递推方程

    方程很简单,每一公里往上推就行 WA了2发,忘了单通道时的特判,还有n m傻傻分不清,忘了fixed什么的我好弱啊QAQ.. #include<bits/stdc++.h> #define ...

  9. mysql数据库知识

    学而时习之,不亦说乎!                              --<论语> 数据库所有操作的总结.   1.mysql的数据库服务为mysqld.exe   windo ...

  10. Docker学习笔记--Docker 启动nginx实例挂载目录权限不够（转）

    今天在启动一个docker 运行nginx实例,在挂载目录时,出现访问静态目录时,权限不够 执行的命令是: docker run --name my-nginx -d -p 80:80 --resta ...