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

作者：简简单单 2014-06-25

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

* { margin: 0; padding: 0; }
        #page-wrap {  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- }
        .tabbed-area div div { background: white; padding: 20px; min- 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;  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- 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- }
        .adjacent div { border: 1px solid #ccc; background: white; padding: 20px; min- 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- 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 {  border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; }
        .box { display: none;  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"><a href="/">CSS-Tricks Example</a></h2>
<div id="demo-bar-buttons"><a class="header-button" href="/5841-css3-tabs/">← Back to Article</a> <a class="header-button" href="/examples/">More Demos →</a></div>
</div>
</div>
<div id="page-wrap">
<div style=" 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><a href="#box-one">Tab 1</a></li>
    <li><a href="#box-two">Tab 2</a></li>
    <li><a href="#box-three">Tab 3</a></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><a href="#box-seven">Tab 7</a></li>
    <li><a href="#box-eight">Tab 8</a></li>
    <li><a href="#box-nine">Tab 9</a></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><a href="#box-thirteen">Tab 13</a></li>
    <li><a href="#box-fourteen">Tab 14</a></li>
    <li><a href="#box-fifteen">Tab 15</a></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><a href="#box1">Tab 19</a></li>
    <li><a href="#box2">Tab 20</a></li>
    <li><a href="#box3">Tab 21</a></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=" 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"><a href="#box-four">Tab 4</a></li>
    <li><a href="#box-five">Tab 5</a></li>
    <li><a href="#box-six">Tab 6</a></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><a href="#box-four">Tab 4</a></li>
    <li class="cur"><a href="#box-five">Tab 5</a></li>
    <li><a href="#box-six">Tab 6</a></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><a href="#box-four">Tab 4</a></li>
    <li><a href="#box-five">Tab 5</a></li>
    <li class="cur"><a href="#box-six">Tab 6</a></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"><a class="single-tab tab-ten" href="#box-ten"><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></a><a class="single-tab tab-eleven" href="#box-ten"><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></a><a class="single-tab tab-twelve" href="#box-ten"><em>Tab 12</em> <span id="box-twelve">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</span></a></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"><a href="#tab16">Tab 16</a>
<div>One might well argue, that...</div>
</div>
<div id="tab17"><a href="#tab17">Tab 17</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18"><a href="#tab18">Tab 18</a>
<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 {
		
		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;
		
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
	}
	#demo-bar-badge a {
		display: block;
		width: 100%;
		
		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>

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

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

相关文章

精彩推荐