CSS3切角选项卡tabs

CSS3教程手机阅读

源码下载   在线演示
今天你将学习如何创建使用CSS3渐变技术实现切角的选项卡tabs。

HTML  <ul id="tabs"> <li><a href="#" title="tab1">One</a></li> <li><a href="#" title="tab2">Two</a></li> <li><a href="#" title="tab3">Three</a></li> <li><a href="#" title="tab4">Four</a></li></ul> <div id="content"> <div id="tab1">One - content</div> <div id="tab2">Two - content</div> <div id="tab3">Three - content</div> <div id="tab4">Four - content</div></div> CSStabs{ overflow: auto; width: 100%; list-style: none; margin: 0; padding: 0;} #tabs li{ margin: 0; padding: 0; float: left;} #tabs a{ -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2); -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2); box-shadow: -4px 0 0 rgba(0, 0, 0, .2); background: #ad1c1c; background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px); background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px); background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px); background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px); background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px); text-shadow: 0 1px 0 rgba(0,0,0,.5); color: #fff; float: left; font: bold 12px/35px 'Lucida sans', Arial, Helvetica; height: 35px; padding: 0 30px; text-decoration: none;} #tabs a:hover{ background: #c93434; background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px); background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px); background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px); background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px); background: linear-gradient(220deg, transparent 10px, #c93434 10px);} #tabs a:focus{ outline: 0;} #tabs #current a{ background: #fff; background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px); background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px); background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px); background: -o-linear-gradient(220deg, transparent 10px, #fff 10px); background: linear-gradient(220deg, transparent 10px, #fff 10px); text-shadow: none; color: #333;} #content{ background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); background-image: -webkit-linear-gradient(top, #fff, #ddd); background-image: -moz-linear-gradient(top, #fff, #ddd); background-image: -ms-linear-gradient(top, #fff, #ddd); background-image: -o-linear-gradient(top, #fff, #ddd); background-image: linear-gradient(top, #fff, #ddd); -moz-border-radius: 0 2px 2px 2px; -webkit-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px; -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; padding: 30px;} /* Remove the rule below if you want the content to be "organic" */#content div{ height: 220px;} jQuery
$(document).ready(function() { $("#content div").hide(); // Initially hide all content $("#tabs li:first").attr("id","current"); // Activate first tab $("#content div:first").fadeIn(); // Show first tab content   $('#tabs a').click(function(e) { e.preventDefault(); $("#content div").hide(); //Hide all content $("#tabs li").attr("id",""); //Reset id's $(this).parent().attr("id","current"); // Activate this $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab });})();

【CSS3切角选项卡tabs】相关文章

1. CSS3切角选项卡tabs

2. CSS3+jQuery实现文件夹选项卡

3. CSS3+jQuery实现文件夹选项卡

4. 带选项卡功能的在线客服Jquery特效

5. jQuery右侧Tab选项卡的焦点图插件

6. HTML5编辑器：JavaScript IDE WebStorm

7. Bombsville

8. HTML5-WebSocket实现对服务器CPU实时监控

9. HTML5-WebSocket实现多文件同时上传

10. 基于 WebSocket 构建跨浏览器的实时应用

本文来源：https://www.51html5.com/a980.html