插件描述：选项卡导航是你经常遇见浏览网页中的元素。有很多方面，很多样式，但这个想法是相同的:你单击某个选项卡，看其内容而无需页面刷新。 在本文中，您将学习如何建立一些新的 CSS3 和 jQuery 选项卡由谷歌播放设计的启发。
选项卡导航是你经常遇见浏览网页中的元素。有很多方面，很多样式，但这个想法是相同的:你单击某个选项卡，看其内容而无需页面刷新。
在本文中，您将学习如何建立一些新的 CSS3 和 jQuery 选项卡由谷歌播放设计的启发。
HTML
在这里像往常一样是简单的标记。你可能会注意到锚点name的属性和相关的内容的id块之间的相似性。
1 2 3 4 5 6 7 8 9 10 11 12 | <ul id="tabs"> <li><a href="#" name="#tab1">One</a></li> <li><a href="#" name="#tab2">Two</a></li> <li><a href="#" name="#tab3">Three</a></li> <li><a href="#" name="#tab4">Four</a></li> </ul><div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> <div id="tab4">...</div></div> |
CSS
在这里，与往常一样，只用使用CSS无需使用任何图像这样我们可以用最小的容量完成一个漂亮的tabs。
这是所有，这不只是 CSS 一块，它是用来创建这些选项卡的整个 CSS。这是很酷，只用几个简单的css样式，只是 CSS 边框。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | #tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none;}#tabs li { float: left; margin: 0 -15px 0 0;}#tabs a { float: left; position: relative; padding: 0 40px; height: 0; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; border-right: 30px solid transparent; border-bottom: 30px solid #3D3D3D; border-bottom-color: #777\9; opacity: .3; filter: alpha(opacity=30); }#tabs a:hover,#tabs a:focus { border-bottom-color: #2ac7e1; opacity: 1; filter: alpha(opacity=100);}#tabs a:focus { outline: 0;}#tabs #current { z-index: 3; border-bottom-color: #3d3d3d; opacity: 1; filter: alpha(opacity=100); } |
解构它
下面是见证奇迹的地方：
1 2 3 4 5 6 | #tabs a { height: 0; line-height: 30px; border-right: 30px solid transparent; border-bottom: 30px solid #3D3D3D; } |
JQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function resetTabs(){ $("#content > div").hide(); //Hide all content $("#tabs a").attr("id",""); //Reset id's }var myUrl = window.location.href; //get URLvar myUrlTab = myUrl.substring(myUrl.indexOf("#")); var myUrlTabName = myUrlTab.substring(0,4); (function(){ $("#content > div").hide(); // Initially hide all content $("#tabs li:first a").attr("id","current"); // Activate first tab $("#content > div:first").fadeIn(); // Show first tab content $("#tabs a").on("click",function(e) { e.preventDefault(); if ($(this).attr("id") == "current"){ //detection for current tab return } else{ resetTabs(); $(this).attr("id","current"); // Activate this $($(this).attr('name')).fadeIn(); // Show content for current tab } }); for (i = 1; i <= $("#tabs li").length; i++) { if (myUrlTab == myUrlTabName + i) { resetTabs(); $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab $(myUrlTab).fadeIn(); // Show url tab content } }})() |
结束了......
这项技术有一个小缺点，如果您正在使用 IE6。这里会出现一点显示问题，这里您也可以作些简单的调整即可实现。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com