CSS3 & jQuery : 仿 Google Play's 迷你标签导航

[ 作者:笑傲江湖 发布于:2012年-5月-22日 15:02 星期二  分类:百 宝 箱 ]

  这种标签内容导航很常见了,有很多种实现方式,都是为了在页面上显示更多的内容而不用刷新页面。下面这个标签导航,是基于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

微信支付宝

标签: CSS CSS3 jQuery HTML 导航 Tabs

评论0 引用0 浏览2915

说点什么:

正文内容:

 




图片博文
Happy Birthday2014,Start .分离音频