ID控制tab切换

用ID的方法控制一下tab切换，感觉效果很好，代码也很简单。 

上次的有点问题，今天改进了一下，用插件的形式写的。

代码如下：

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >ID控制tab切换 jQuery </ title >
< script  type ="text/javascript"  src ="jquery-1.7.min.js" ></ script >
< script  type ="text/javascript" >
( function ($){
    $.fn.tab = function (options) {
         var  defaultSettings = {
            className:  "" ,
            event:  ""
        }
        
         var  s = $.extend(defaultSettings,options);
        
         return   this .each( function () {
             var  length  =  $( this ).find( " a " ).length - 1 ;
             var  className  =  $( " . " + s.className);
            
             if (className.length > 1 ) {
                className.hide();
                className.eq(length).show();
            } else  {
                className.eq( 0 ).show();
            }
            
            $( this ).find( " a " ).eq(length).addClass( " on " );
            
            $( this ).find( " a " ).bind(s.event, function () {
                 var  node  =  $( this ).attr( " href " ).slice( 1 );
                $( " . " + s.className).hide();                
                $( " # " + node).show();
                
                $( this ).parent().find( " a " ).removeAttr( " class " );
                $( this ).addClass( " on " );
                
                 return   false ;
            });
        })
        
    }    
})(jQuery)
$( function (){    
    $( " p " ).tab({
        className:  " context " ,
        event:  " click "
    });
        
})
</ script >
< style  type ="text/css" >
.on  {
    color :  #f00 ;
}
</ style >
</ head >

< body >
< p >< a  href ="#red" >红色背景 </ a >< a  href ="#green" >绿色背景 </ a >< a  href ="#black" >黑色背景 </ a ></ p >
< div  id ="red"  class ="context" >红色背景红色背景红色背景红色背景 </ div >
< div  id ="green"  class ="context" >绿色背景绿色背景绿色背景绿色背景绿色背景 </ div >
< div  id ="black"  class ="context" >黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景 </ div >
< div  class ="context" >黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景 </ div >
</ body >
</ html >

P.S: Tab切换的内容最好用一个div包起来，否者会出问题的