教程集 > 脚本编程 > javascript > 正文纯css3实现tab切换选项卡特效代码

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

发布时间：2023-04-28 编辑：jiaochengji.com

教程集为您提供纯css3实现tab切换选项卡特效代码等资源，欢迎您收藏本站，我们将为您提供最新的纯css3实现tab切换选项卡特效代码资源

tab选项卡用到最多的就是使用js CSS来实现了，但今天看到一老外直接使用CSS3写的一个非常不错的tab选项卡效果了，下面给各位看看，希望来给你带来帮助哦。

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

<p>  <meta charset="UTF-8" /><style type="text/css">            * { margin: 0; padding: 0; }          #page-wrap { width: 960px; margin: 100px auto; }          h1 { font: 36px Georgia, Serif; margin: 20px 0; }          .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }          p { margin: 0 0 10px 0; }                    .tabs { list-style: none; }          .tabs li { display: inline; }          .tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }          .tabs li a:hover { background: #ccc; }                              /* Generic styles & example one */                    .tabbed-area { margin: 0 0 120px 0; }          .box-wrap { position: relative; min-height: 250px; }          .tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }          .tabbed-area div div, .tabs li a { border: 1px solid #ccc; }          #box-one:target, #box-two:target, #box-three:target { z-index: 1; }                                        /* Stuff for example two */                    .cur-nav-fix { margin-top: 60px; }          .cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }          .cur-nav-fix .tabs li a { background: -moz-linear-gradient(top, white, #eee); }          #box-four { z-index: 1; }          #box-four:target .tabs,          #box-five:target .tabs,          #box-six:target .tabs { z-index: 3; }          #box-four:target, #box-five:target, #box-six:target { z-index: 2; }          .cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }                              /* Stuff for example three */                    .cur-nav-fix-2 .tabs li a { background: -moz-linear-gradient(top, white, #eee); }          .cur-nav-fix-2 .tabs { z-index: 2; position: relative; }          #box-seven:target .box-seven,          #box-eight:target .box-eight,          #box-nine:target .box-nine { z-index: 1; }          #box-seven:target a[href="#box-seven"],          #box-eight:target a[href="#box-eight"],          #box-nine:target a[href="#box-nine"] { border-bottom: 1px solid white; background: white; }                              /* Stuff for example four */                    .active-test { padding-top: 40px; }          .active-test .single-tab em { background: white; width: 50px; font-style: normal; position: absolute; bottom: 100%; text-decoration: none; color: black; border: 1px solid #ccc; padding: 5px 10px; }          .active-test .single-tab span { position: absolute; top: -1px; left: 0; width: 100%; display: block; padding: 20px; border: 1px solid #ccc; min-height: 250px; background: white; }          .active-test .single-tab:active em { background: #ccc; }          .active-test .single-tab:active span, .active-test .single-tab:focus span { z-index: 1; }          .tab-ten em { left: 0; }          .tab-eleven em { left: 70px; }          .tab-twelve em { left: 140px; }                              /* Stuff for example five */                    .adjacent { position: relative; margin-top: 50px; min-height: 300px; }          .adjacent div { border: 1px solid #ccc; background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }          .adjacent .tabs { position: absolute; bottom: 100%; left: 0; z-index: 2; }          .adjacent .tabs li a { background: -moz-linear-gradient(top, white, #eee); }          #box-thirteen:target,          #box-fourteen:target,          #box-fifteen:target { z-index: 1; }          #box-thirteen:target ~ .tabs a[href='#box-thirteen'],          #box-fourteen:target ~ .tabs a[href='#box-fourteen'],          #box-fifteen:target ~ .tabs a[href='#box-fifteen'] { background: white; border-bottom: 1px solid white; }              /* Stuff for example six */            .w3c { min-height: 250px; position: relative; width: 100%; }          .w3c > div { display: inline; }          .w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }          .w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }	          .w3c > div:target > a { background: white; }	          .w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }	          .w3c > div:not(:target) > div { position: absolute }          .w3c > div:target > div { position: absolute; z-index: -1; }                              /* Stuff for example seven - including conditionals below */                    #ie-test { position: relative; width: 100%; }          #boxLinks { list-style: none; overflow: hidden; }          #boxLinks li {  display: inline; }          #boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; }          #boxLinks li a:hover { color: #fff; background: #000; }          #box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; }          .box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; }          #box1:target, #box2:target, #box3:target { display: block; }        </style></p>    <div id="demo-top-bar">  <div id="demo-bar-inside">  <h2 id="demo-bar-badge">CSS-Tricks Example</h2>  <div id="demo-bar-buttons">← Back to Article More Demos →</div>  </div>  </div>  <div id="page-wrap">  <div style="width: 420px; float: left">  <h1>Example One</h1>  <p>Grade: C</p>  <p>From an HTML perspective, this is the absolute cleanest. It just doesn't deal with current navigation highlighting.</p>  <div class="tabbed-area">  <ul class="tabs group">      <li>Tab 1</li>      <li>Tab 2</li>      <li>Tab 3</li>  </ul>  <div class="box-wrap">  <div id="box-one">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  </div>  <div id="box-two">  <p>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</p>  </div>  <div id="box-three">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  </div>  </div>  </div>  <h1>Example Three</h1>  <p>Grade: B</p>  <p>This has current navigation highlighting. The only downside is that it requires as many wrapping divs as there are panels.</p>  <div id="box-seven">  <div id="box-eight">  <div id="box-nine">  <div class="tabbed-area cur-nav-fix-2">  <ul class="tabs group">      <li>Tab 7</li>      <li>Tab 8</li>      <li>Tab 9</li>  </ul>  <div class="box-wrap">  <div class="box-seven">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  </div>  <div class="box-eight">  <p>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</p>  </div>  <div class="box-nine">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  </div>  </div>  </div>  </div>  </div>  </div>  <h1>Example Five</h1>  <p>Grade: B</p>  <p>This is handles current navigation highlighting, with pretty clean HTML. The only downside is that the list for the tab navigation comes <em>after</em> the panels.</p>  <div class="tabbed-area adjacent">  <div id="box-thirteen">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  </div>  <div id="box-fourteen">  <p>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</p>  </div>  <div id="box-fifteen">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  </div>  <ul class="tabs group">      <li>Tab 13</li>      <li>Tab 14</li>      <li>Tab 15</li>  </ul>  </div>  <h1>Example Seven</h1>  <p>Grade: Depends</p>  <p>This example is the only one that works in IE 7 , so that's big bonus points.</p>  <div id="ie-test">  <ul id="boxLinks" class="group">      <li>Tab 19</li>      <li>Tab 20</li>      <li>Tab 21</li>  </ul>  <div id="box">  <div id="box1" class="box">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  </div>  <div id="box2" class="box">Another box! </div>  <div id="box3" class="box">Woot! </div>  </div>  </div>  </div>  <div style="width: 420px; float: right">  <h1>Example Two</h1>  <p>Grade: D</p>  <p>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.</p>  <div class="tabbed-area cur-nav-fix">  <div class="box-wrap">  <div id="box-four">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  <ul class="tabs group">      <li class="cur">Tab 4</li>      <li>Tab 5</li>      <li>Tab 6</li>  </ul>  </div>  <div id="box-five">  <p>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</p>  <ul class="tabs group">      <li>Tab 4</li>      <li class="cur">Tab 5</li>      <li>Tab 6</li>  </ul>  </div>  <div id="box-six">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  <ul class="tabs group">      <li>Tab 4</li>      <li>Tab 5</li>      <li class="cur">Tab 6</li>  </ul>  </div>  </div>  </div>  <h1>Example Four</h1>  <p>Grade: F</p>  <p>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.</p>  <div class="tabbed-area active-test">  <div class="box-wrap"><em>Tab 10</em> <span id="box-ten">  <ul>      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>      <li>Aliquam tincidunt mauris eu risus.</li>      <li>Vestibulum auctor dapibus neque.</li>  </ul>  </span><em>Tab 11</em> <span id="box-eleven">  <p>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</p>  </span><em>Tab 12</em> <span id="box-twelve">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  </span></div>  </div>  <h1>Example Six</h1>  <p>Grade: A</p>  <p>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.</p>  <div class="w3c">  <div id="tab16">Tab 16  <div>One might well argue, that...</div>  </div>  <div id="tab17">Tab 17  <div>... 30 lines of CSS is rather a lot, and...</div>  </div>  <div id="tab18">Tab 18  <div>... that 2 should have been enough, but...</div>  </div>  </div>  </div>  </div>  <p><style style="display: none !important" type="text/css">    	* {  		margin: 0;  		padding: 0;  	}  	body {  		overflow-x: hidden;  	}  	#demo-top-bar {  		text-align: left;  		background: #222;  		position: relative;  		zoom: 1;  		width: 100% !important;  		z-index: 6000;  		padding: 20px 0 20px;  	}  	#demo-bar-inside {  		width: 960px;  		margin: 0 auto;  		position: relative;  	}  	#demo-bar-buttons {  		padding-top: 10px;  		float: right;  	}  	#demo-bar-buttons a {  		font-size: 12px;  		margin-left: 20px;  		color: white;  		margin: 2px 0;  		text-decoration: none;  		font: 14px "Lucida Grande", Sans-Serif !important;  	}  	#demo-bar-buttons a:hover,  	#demo-bar-buttons a:focus {  		text-decoration: underline;  	}  	#demo-bar-badge {  		display: inline-block;  		width: 302px;  		padding: 0 !important;  		margin: 0 !important;  		background-color: transparent !important;  	}  	#demo-bar-badge a {  		display: block;  		width: 100%;  		height: 38px;  		border-radius: 0;  		bottom: auto;  		margin: 0;  		background: url(/images/examples-logo.png) no-repeat;  		background-size: 100%;  		overflow: hidden;  		text-indent: -9999px;  	}  	#demo-bar-badge:before, #demo-bar-badge:after {  		display: none !important;  	}</style></p></td>  	  </tr>  	</table>

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

您可能感兴趣的文章：
纯CSS实现Tab页切换效果
 纯 CSS 选项卡的实现例子
 巧用radio实现纯css选项卡完美切换实例
 Jquery 经典选项卡的实现代码一例
 CSS3中target实现选项卡切换效果
 js封装一个tab效果特效代码
 JQuery Tab选项卡效果代码改进版
 纯CSS3实现的Tab选项卡三个实例分享
 jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
 jquery自动切换tabs选项卡的实现代码

上一篇：js 右下角浮动广告代码下一篇：js Select下拉列表框进行多选、移除、交换内容

[关闭]

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

最近更新

浏览排行