css+Jquery创建Tab切换效果:_jquery tab append-CSDN博客

本文链接：https://blog.csdn.net/xochenlin/article/details/3639379
css+Jquery创建Tab切换效果:
效果如图:
创建代码如下:
注:在测试该代码前,应将jquery.js引入
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script src="../Js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            padding:0px;
            margin:0px; 
            font-size:12px;
        }
        .tabPanel
        {
            margin-bottom:10px; 
            width:400px;
        }
        
        ul.tabs
        {
            background:black url(../Images/bg_tab.gif) repeat-x scroll 0 0;
            border-right:1px solid #DEDEDE;
            height:28px;
            line-height:28px;
            overflow:hidden;          
             
        }
        
        ul.tabs li
        {
            float:left; 
        }
        
        .selected
        {  
            color:Green;
            background:transparent url(../Images/bg_tab_selected.gif) no-repeat scroll 0 0;
            border-left:0 none;
            border-right:1px solid #A4B2BD;          
        }
        
        ul.tabs li a {
            
            border-left:1px solid #DEDEDE;
            color:#111111;
            display:block;
            float:left;
            outline-color:-moz-use-text-color;
            outline-style:none;
            outline-width:medium;
            padding:0 10px;
            text-decoration:none;
        }        
      
        .panelPadding {
           
           background-color:Maroon;          
           border-width:0 1px 1px;
           border-color:-moz-use-text-color #A4B2BD #A4B2BD;
           border-style:none solid solid;
          
           overflow:hidden;
        }
        
        .panelTable
        {
            
        }
        
        .panelPadding img
        {
            width:100%; 
            height:300px;
        }
    </style>
    <script type="text/javascript">
    /*点击Tab切换动态加载数据*/
        function loadData(tabIndex)
        {
            $("#panelPadding1 .panelTable").html("");
            var t=$("#tabPanel1 .selected");            
         
            $("#panelPadding1 .panelTable").append("<img src='"+t[0].title+"' title='"+t.html()+"' /> ");  //<img src='"+t[0].title+"' title='"+t[0].html()+"' />    
                  
        }
        
        //tabPanel组件用于切换tab的动作
        
        function tabSwitch(itemID,pannelID)
        {
            var tabBtn=$("#"+pannelID+" .tabs a");
            for(var i=0;i<tabBtn.length;i++)
            {
                if(tabBtn[i].id==itemID)
                {
                    tabBtn[i].className="selected";
                }
                else
                {
                    tabBtn[i].className="";
                }
            }
        }
        $(function(){
            
          $("#panelPadding1 .panelTable").append("<img src='../Images/U10P1T1D126887F9DT20081215151307.jpg' /> ");  //<img src='"+t[0].title+"' title='"+t[0].html()+"' />          
        });
    </script>
</head>
<body>
    <div style="margin-left:200px;margin-top:100px;">
        <div id="tabPanel1" class="tabPanel">
            <ul class="tabs">                
                <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('0');" href="###" id="item0" title="../Images/U10P1T1D126887F9DT20081215151307.jpg">
                    图片一</a></li>
                
                <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('1');" href="###" id="item1" title="../Images/2feba09120a4bee45656e142d298cc06.jpg">
                    图片二</a></li>
                
                <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('2');" href="###" id="item2" title="../Images/4.jpg">
                    图片三</a></li>
            </ul>
           
            <div id="panelPadding1" class="panelPadding">
               <div class="panelTable" id="resultTable">                
               </div>               
            </div>
        </div>
    </div>
</body>
</html>
 