看到Sunnyhall在文章里使用了tab选项卡的效果，很不错，也想弄一个过来，网上扒了一串代码，样式没有怎么改。

首先是DIV部分

  1. <div id="jv_tabs"><span><a href="#" name="#tab1">标题一</a></span><span><a href="#" name="#tab2">标题二</a></span><span><a href="#" name="#tab3">标题三</a></span><span><a href="#" name="#tab4">标题四</a></span></div><div id="jv_content"><div id="tab1" class="jv_act">内容一</div><div id="tab2" class="jv_act">内容二</div><div id="tab3" class="jv_act">内容三</div><div id="tab4" class="jv_act">内容四</div></div>

然后是CSS

  1. #jv_tabs {
  2.   overflow: hidden;
  3.   width: 100%;
  4.   margin: 0;
  5.   padding: 0;
  6.   list-style: none;
  7. }
  9. #jv_tabs span {
  10.   float: left;
  11.   margin: 0 -15px 0 0;
  12. }
  14. #jv_tabs a {
  15.   float: left;
  16.   position: relative;
  17.   padding: 0 40px;
  18.   height: 0;
  19.   line-height: 30px;
  20.   text-transform: uppercase;
  21.   text-decoration: none;
  22.   color: #fff;      
  23.   border-right: 30px solid transparent;
  24.   border-bottom: 30px solid #3D3D3D;
  25.   border-bottom-color: #777\9;
  26.   opacity: .3;
  27.   filter: alpha(opacity=30);      
  28. }
  30. #jv_tabs a:hover,
  31. #jv_tabs a:focus {
  32.   border-bottom-color: #2ac7e1;
  33.   opacity: 1;
  34.   filter: alpha(opacity=100);
  35. }
  37. #jv_tabs a:focus {
  38.   outline: 0;
  39. }
  41. #jv_tabs #current {
  42.   z-index: 3;
  43.   border-bottom-color: #3d3d3d;
  44.   opacity: 1;
  45.   filter: alpha(opacity=100);      
  46. }
  48. /* ------jv_content----- */
  49. #jv_content {
  50.     background: #fff;
  51.     border-top: 2px solid #3d3d3d;
  52.     padding: 0;
  53.     /*height: 220px;*/
  54. }
  56. #jv_content h2,
  57.   #jv_content h3,
  58.   #jv_content p {
  59.     margin: 0 0 15px 0;
  60. }  

最后加一段脚本

  1. <script>
  2.     function resetjv_tabs(){
  3.         $("#jv_content > div").hide(); //Hide all jv_content
  4.         $("#jv_tabs a").attr("id",""); //Reset id's      
  5.     }
  7.     var myUrl = window.location.href; //get URL
  8.     var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/jv_tabs.html#tab2, myUrlTab = #tab2     
  9.     var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
  11.     (function(){
  12.         $("#jv_content > div").hide(); // Initially hide all jv_content
  13.         $("#jv_tabs li:first a").attr("id","current"); // Activate first tab
  14.         $("#jv_content > div:first").fadeIn(); // Show first tab jv_content
  15.         
  16.         $("#jv_tabs a").on("click",function(e) {
  17.             e.preventDefault();
  18.             if ($(this).attr("id") == "current"){ //detection for current tab
  19.              return       
  20.             }
  21.             else{             
  22.             resetjv_tabs();
  23.             $(this).attr("id","current"); // Activate this
  24.             $($(this).attr('name')).fadeIn(); // Show jv_content for current tab
  25.             }
  26.         });
  28.         for (i = 1; i <= $("#jv_tabs li").length; i++) {
  29.           if (myUrlTab == myUrlTabName + i) {
  30.               resetjv_tabs();
  31.               $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
  32.               $(myUrlTab).fadeIn(); // Show url tab jv_content        
  33.           }
  34.         }
  35.     })()
  36. </script>

注意：这个效果需要有jQuery库的支持，1.7.2版以上。

css3 tabs

  • 演示效果
    • TAGS:  

    本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

    转载请注明出处链接 : https://www.inlojv.com/3761.html