css+Jquery创建Tab切换效果:

css+Jquery创建Tab切换效果:

效果如图:

 

css+Jquery创建Tab切换效果:_第1张图片

 

创建代码如下:

注:在测试该代码前,应将jquery.js引入

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3.     <title>无标题页title>
  4.     <script src="../Js/jquery.js" type="text/javascript">script>
  5.     <style type="text/css">
  6.         *
  7.         {
  8.             padding:0px;
  9.             margin:0px; 
  10.             font-size:12px;
  11.         }
  12.         .tabPanel
  13.         {
  14.             margin-bottom:10px; 
  15.             width:400px;
  16.         }
  17.         
  18.         ul.tabs
  19.         {
  20.             background:black url(../Images/bg_tab.gif) repeat-x scroll 0 0;
  21.             border-right:1px solid #DEDEDE;
  22.             height:28px;
  23.             line-height:28px;
  24.             overflow:hidden;          
  25.              
  26.         }
  27.         
  28.         ul.tabs li
  29.         {
  30.             float:left; 
  31.         }
  32.         
  33.         .selected
  34.         {  
  35.             color:Green;
  36.             background:transparent url(../Images/bg_tab_selected.gif) no-repeat scroll 0 0;
  37.             border-left:0 none;
  38.             border-right:1px solid #A4B2BD;          
  39.         }
  40.         
  41.         ul.tabs li a {
  42.             
  43.             border-left:1px solid #DEDEDE;
  44.             color:#111111;
  45.             display:block;
  46.             float:left;
  47.             outline-color:-moz-use-text-color;
  48.             outline-style:none;
  49.             outline-width:medium;
  50.             padding:0 10px;
  51.             text-decoration:none;
  52.         }        
  53.       
  54.         .panelPadding {
  55.            
  56.            background-color:Maroon;          
  57.            border-width:0 1px 1px;
  58.            border-color:-moz-use-text-color #A4B2BD #A4B2BD;
  59.            border-style:none solid solid;
  60.           
  61.            overflow:hidden;
  62.         }
  63.         
  64.         .panelTable
  65.         {
  66.             
  67.         }
  68.         
  69.         .panelPadding img
  70.         {
  71.             width:100%; 
  72.             height:300px;
  73.         }
  74.     style>
  75.     <script type="text/javascript">
  76.     /*点击Tab切换动态加载数据*/
  77.         function loadData(tabIndex)
  78.         {
  79.             $("#panelPadding1 .panelTable").html("");
  80.             var t=$("#tabPanel1 .selected");            
  81.          
  82.             $("#panelPadding1 .panelTable").append("<img src='"+t[0].title+"' title='"+t.html()+"' /> ");  //<img src='"+t[0].title+"' title='"+t[0].html()+"' />    
  83.                   
  84.         }
  85.         
  86.         //tabPanel组件用于切换tab的动作
  87.         
  88.         function tabSwitch(itemID,pannelID)
  89.         {
  90.             var tabBtn=$("#"+pannelID+" .tabs a");
  91.             for(var i=0;i<tabBtn.length;i++)
  92.             {
  93.                 if(tabBtn[i].id==itemID)
  94.                 {
  95.                     tabBtn[i].className="selected";
  96.                 }
  97.                 else
  98.                 {
  99.                     tabBtn[i].className="";
  100.                 }
  101.             }
  102.         }
  103.         $(function(){
  104.             
  105.           $("#panelPadding1 .panelTable").append("<img src='../Images/U10P1T1D126887F9DT20081215151307.jpg' /> ");  //<img src='"+t[0].title+"' title='"+t[0].html()+"' />          
  106.         });
  107.     script>
  108. head>
  109. <body>
  110.     <div style="margin-left:200px;margin-top:100px;">
  111.         <div id="tabPanel1" class="tabPanel">
  112.             <ul class="tabs">                
  113.                 <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('0');" href="###" id="item0" title="../Images/U10P1T1D126887F9DT20081215151307.jpg">
  114.                     图片一a>li>
  115.                 
  116.                 <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('1');" href="###" id="item1" title="../Images/2feba09120a4bee45656e142d298cc06.jpg">
  117.                     图片二a>li>
  118.                 
  119.                 <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('2');" href="###" id="item2" title="../Images/4.jpg">
  120.                     图片三a>li>
  121.             ul>
  122.            
  123.             <div id="panelPadding1" class="panelPadding">
  124.                <div class="panelTable" id="resultTable">                
  125.                div>               
  126.             div>
  127.         div>
  128.     div>
  129. body>
  130. html>

 

 

你可能感兴趣的:(C#实用小知识点,jquery,css,class,tabs,function,float)