AJAX TAB JQUERY 选项卡标签

JavaScript Code
<script>  
$(document).ready(function(){  
      
      
      
    var Tabs = {  
        'Tab one'   : 'pages/page1.html',  
        'Tab two'   : 'pages/page2.html',  
        'Tab three' : 'pages/page3.html',  
        'Tab four'  : 'pages/page4.html'  
    }  
      
      
    var colors = ['blue','green','red','orange'];  
      
      
    var topLineColor = {  
        blue:'lightblue',  
        green:'lightgreen',  
        red:'red',  
        orange:'orange'  
    }  
      
    /* Looping through the Tabs object: */  
    var z=0;  
    $.each(Tabs,function(i,j){  
        /* Sequentially creating the tabs and assigning a color from the array: */  
        var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');  
          
        /* Setting the page data for each hyperlink: */  
        tmp.find('a').data('page',j);  
          
        /* Adding the tab to the UL container: */  
        $('ul.tabContainer').append(tmp);  
    })  
  
    /* Caching the tabs into a variable for better performance: */  
    var the_tabs = $('.tab');  
      
    the_tabs.click(function(e){  
        /* "this" points to the clicked tab hyperlink: */  
        var element = $(this);  
          
        /* If it is currently active, return false and exit: */  
        if(element.find('#overLine').length) return false;  
          
        /* Detecting the color of the tab (it was added to the class attribute in the loop above): */  
        var bg = element.attr('class').replace('tab ','');  
  
        /* Removing the line: */  
        $('#overLine').remove();  
          
        /* Creating a new line with jQuery 1.4 by passing a second parameter: */  
        $('<div>',{  
            id:'overLine',  
            css:{  
                display:'none',  
                width:element.outerWidth()-2,  
                background:topLineColor[bg] || 'white'  
            }}).appendTo(element).fadeIn('slow');  
          
        /* Checking whether the AJAX fetched page has been cached: */  
          
        if(!element.data('cache'))  
        {     
            /* If no cache is present, show the gif preloader and run an AJAX request: */  
            $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');  
  
            $.get(element.data('page'),function(msg){  
                $('#contentHolder').html(msg);  
                  
                /* After page was received, add it to the cache for the current hyperlink: */  
                element.data('cache',msg);  
            });  
        }  
        else $('#contentHolder').html(element.data('cache'));  
          
        e.preventDefault();  
    })  
      
    /* Emulating a click on the first tab so that the content area is not empty: */  
    the_tabs.eq(0).click();  
});  
  
</script>  

index.html

XML/HTML Code
<div id="main">  
  
<ul class="tabContainer">  
  
</ul>  
  
<div class="clear"></div>  
  
<div id="tabContent">  
    <div id="contentHolder">  
          
    </div>  
</div>  
  
</div>  

原文地址:http://www.freejs.net/article_tabbiaoqian_46.html

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签

相关推荐

AJAX TAB JQUERY 选项卡标签

AJAX TAB JQUERY 选项卡标签