纯css3实现tab切换选项卡特效代码

提示:您可以先修改部分代码再运行

CSS-Tricks Example

← Back to Article More Demos →

Example One

Grade: C

From an HTML perspective, this is the absolute cleanest. It just doesn't deal with current navigation highlighting.

  • Tab 1
  • Tab 2
  • Tab 3
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Example Three

Grade: B

This has current navigation highlighting. The only downside is that it requires as many wrapping divs as there are panels.

  • Tab 7
  • Tab 8
  • Tab 9
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Example Five

Grade: B

This is handles current navigation highlighting, with pretty clean HTML. The only downside is that the list for the tab navigation comes after the panels.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Tab 13
  • Tab 14
  • Tab 15

Example Seven

Grade: Depends

This example is the only one that works in IE 7+, so that's big bonus points.

  • Tab 19
  • Tab 20
  • Tab 21
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Another box!

Woot!

Example Two

Grade: D

This fixes the current navigation problem, but requires the menu to be repeated inside of each panel, which is pretty unacceptable. The hash-links also jump to the panel themselves, which cuts off the actual tabs if there is enough page scroll below the panels.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Tab 4
  • Tab 5
  • Tab 6

Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

  • Tab 4
  • Tab 5
  • Tab 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Tab 4
  • Tab 5
  • Tab 6

Example Four

Grade: F

This was an attempt at using the :active and :focus states instead of using :target. This would have made it even IE 6 compatible. It works as you click, but I haven't been able to get the link to keep it's focus or active state after the click. Plus, all the content is inside the anchor link which is sketchy at best.

Tab 10Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.Tab 11
Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Tab 12
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Example Six

Grade: A

This is the winner so far. It is infinitely expandable (no selectors specific to panels) and the markup is pretty clean. Possible issues: cross-browser line height issues possibly not making perfect layout, links are placed right above each div instead of a in central list at the top.

Tab 16

One might well argue, that...

Tab 17

... 30 lines of CSS is rather a lot, and...

Tab 18

... that 2 should have been enough, but...

提示:您可以先修改部分代码再运行

时间: 2024-09-26 20:27:53

纯css3实现tab切换选项卡特效代码的相关文章

jquery点击缩略图切换视频播放特效代码分享_jquery

本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html

JS实现简单的tab切换选项卡效果_javascript技巧

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!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"> <m

js 自动切换选项卡效果代码

本文章收藏了一款自动切换选项卡效果,他是利用了js定时来设置tab 选项卡自动切换的,很网大型网站都有这种效果,他可以放文字同时也可以放图片,反正是自动切换吧,放什么内容都可以地. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=&

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果_javascript技巧

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL

jQuery自动切换/点击切换选项卡效果代码

点击切换和自动切换选项卡 2秒会自动切换 星知苑 点击看看 会自动的 jQuery eq和get区别和使用方法 修改新版本emlog使用老版本kindeditor编辑器 PHP获取网页内容的方法 emlog热门日志修改 [emlog编辑器]TQEditor for emlog emlog后台关键词(keywords)清空bug [emlog编辑器]ueditor for emlog v3.5 [emlog编辑器]xhEditor for emlog 中兴F460光猫破解超级管理员 中兴光纤猫F4

extjs4中基本tab切换选项卡代码

1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据. 另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码: [html]  代码如下 复制代码     <h1>基本选项卡</h1>     <div class="content" style=&

js tab切换选项卡代码

这里便于演示,只设置了两个栏目切换,你可以根据需要,自行增加栏目!修改CSS使它更适合你的网站 有问题请看这里 菜单特效 网页特效简介 · 超酷XP风格网页右键菜单 · 通用3级联动菜单 · 相当好玩的右键弹出菜单 · 用CSS设计的纵向导航条实例 · 将网站设为首页的代码 更多>>> 网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力.为网页添加特效,学会添加网页特效的过程能从一定程度上激发网页初学者更加了解HTML语言的结构.

js Tab选项卡特效代码

 <!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

可左右滚动的js tab切换选项卡代码

<< 选项一 选项二 选项三 选项四 选项五 选项六 选项七 选项八 选项九 选项十 选项11 选项12 选项13 选项14 选项15 选项16 选项17 选项18 选项19 选项20 选项21 选项22 选项23 选项24 >> 1第一最好不相见,如此便可不相恋.第二最好不相知,如此便可不相思. 第三最好不相伴,如此便可不相欠.第四最好不相惜,如此便可不相忆. 第五最好不相爱, 不相对,如此便可不相会. 第七最好不相误,如此便可不相负.第八最好不相许,如此便可不相续. 第九最好不