zoukankan      html  css  js  c++  java
  • tab选项卡

    Css:

     1 <style type="text/css"> 
     2 ul,li,div{ margin:0; padding:0;}  
     3 ul,li{ list-style:none;}  
     4 .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
     5 .tab{ background:#F93; overflow:hidden; width:450px;}  
     6 .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
     7 .tab li.on{background:#F60;}  
     8 .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
     9 .tabContent .hide{ display:none;}  
    10 </style> 

    Html:

     1     <div class="tabWrap"> 
     2         <ul class="tab"> 
     3             <li>选项卡1</li> 
     4             <li>选项卡2</li> 
     5             <li>选项卡3</li> 
     6         </ul> 
     7         <div class="tabContent"> 
     8             <div class="p-content">1111</div> 
     9             <div class="p-content hide">222</div> 
    10             <div class="p-content hide">3333</div> 
    11         </div> 
    12     </div> 
    13       
    14     <br/> 
    15     <br/> 
    16     <div class="tabWrap"> 
    17         <ul class="tab"> 
    18             <li>选项卡1</li> 
    19             <li>选项卡2</li> 
    20             <li>选项卡3</li> 
    21         </ul> 
    22         <div class="tabContent"> 
    23             <div class="p-content">1111</div> 
    24             <div class="p-content hide">222</div> 
    25             <div class="p-content hide">3333</div> 
    26         </div> 
    27     </div> 

    Javascript:

     1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
     2 <script type="text/javascript">  
     3     $(function(){  
     4         function tabs(tabMenu,on,tabContent){  
     5         $(tabContent).each(function(){  
     6             $(this).children().eq(0).show();      
     7         });   
     8         $(tabMenu).each(function(){  
     9             $(this).children().eq(0).addClass(on);    
    10         });  
    11         $(tabMenu).children().hover(function(){  
    12             $(this).addClass(on).siblings().removeClass(on);  
    13             var index = $(tabMenu).children().index(this);  
    14             $(tabContent).children().eq(index).show().siblings().hide();      
    15         });  
    16     }  
    17     tabs(".tab","on",".tabContent");  
    18 })  
    19           
    20     </script> 

    PS:现在的选项卡为鼠标滑过,若想改成鼠标点击的,把JS中的"hover"改为"click"即可。

  • 相关阅读:
    【译】.NET 的新的动态检测分析
    【译】Visual Studio 的 Razor 编辑器的改进
    【译】.NET 5. 0 中 Windows Form 的新特性
    MySQL InnoDB 索引(Index)
    MySQL 全文检索(Full-Text Search)
    MySQL 计算最大值、最小值和中位数
    MySQL 触发器(Triggers)
    MySQL 视图(View)
    MySQL基础知识:MySQL String 字符串处理
    MySQL基础知识:MySQL Connection和Session
  • 原文地址:https://www.cnblogs.com/kcfw/p/2988992.html
Copyright © 2011-2022 走看看