tabs 선택 로드

$(document).ready(function() {  
     var $this = $(this),
          index= 0,
         timer=null;
         
    $('.nav li').click(function(){      
        index =$(this).index(); 
        showbox(index);
    });
    
    function showbox(index){
        $('.nav li').eq(index).addClass('cur').siblings().removeClass('cur');
        $(".content li").eq(index).fadeIn().siblings().hide(); 
        
     var currentcon=$(".content li").eq(index);
      //console.log(currentcon);
     var script=currentcon.find('script[type="text/templ"]');
      // console.log(script.length);
        if(script.length>0){
            console.log( currentcon[0]);
            currentcon[0].innerHTML=script.html();     
         }    
     }

    /*$(".warp1").hover(function(){
            clearInterval(timer);        
            },function(){
            timer =    setInterval(function(){
            index = (index+1)%3;     
            showbox(index);        
            },2000); 
         })*/
      $(".warp1").hover(function(){
        clearTimeout(timer);        
      },function(){
       auto();
       })
       
     function auto(){
           timer =    setTimeout(function(){
            index = (index+1)%3;     
            showbox(index);    
            
            timer=setTimeout(arguments.callee,3000)
        },2000); 
      };
      auto();
});
</script>
<div class="warp1">
    <ul class="nav" id="nav">    
        <li class="cur">nav1</li>
        <li>nav2</li>
        <li>nav3</li>
    </ul>
    <ul class="content">    
        <li><img src="http://img04.taobaocdn.com/tps/i4/T1tJ9sXnxtXXXXXXXX-120-160.jpg">content1</</li>
        <li><script type="text/templ"><img src="http://img02.taobaocdn.com/tps/i2/T1eSWuXdprXXXXXXXX-120-160.jpg">content2</script></li>
        <li><script type="text/templ"><img src="http://img04.taobaocdn.com/tps/i4/T1umSuXjhrXXXXXXXX-120-160.jpg">content3</script></li>
    </ul>
</div>