这种标签内容导航很常见了,有很多种实现方式,都是为了在页面上显示更多的内容而不用刷新页面。下面这个标签导航,是基于CSS3和jQuery的,且是仿 Google Play's 的。
看看吧【https://play.google.com】
本身这个标签导航是没有用到任何图片的,纯纯的CSS3+HTML,辅之以jQuery,上面演示帧页面中的图片是俺为了切合文字美化了一下。按照原页面的教程,标签的几块内容,在页面刷新时会闪一下全部内容,俺就稍微在CSS里收拾了一下。
有兴趣的话可以查看上面演示帧页面的源代码。
HTML:
<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:
#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);
}
jQuery:
function resetTabs(){
$("#content div").hide(); //Hide all content
$("#tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For mywebsite.com/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(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
}
}
})()
查看原文:http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery