HTML소스

<div class="all">
     <div class="tabSet">
         <ul class="tabs">
             <li><a href="#panel1-1" class="on">panel 1</a></li>
                <li><a href="#panel1-2" >panel 2 </a></li>
                <li><a href="#panel1-3" >panel 3 </a></li>
                <li><a href="#panel1-4" >panel 4 </a></li>
         </ul>
            <div class="panels">
             <div class="panel" id="panel1-1">This is panel1. This is panel1. This is panel1. This is panel1. This is panel1.</div>
                <div class="panel" id="panel1-2">This is panel2. This is panel2. This is panel2. This is panel2. This is panel2.</div>
                <div class="panel" id="panel1-3">This is panel3. This is panel3. This is panel3. This is panel3. This is panel3.</div>
                <div class="panel" id="panel1-4">This is panel4. This is panel4. This is panel4. This is panel4. This is panel4.</div>
            <!--/panels --></div>
        <!--/tabSet --></div>
       
        <div class="tabSet">
         <ul class="tabs">
             <li><a href="#panel2-1" >panel 1</a></li>
                <li><a href="#panel2-2" >panel 2 </a></li>
                <li><a href="#panel2-3" class="on" >panel 3 </a></li>
                <li><a href="#panel2-4" >panel 4 </a></li>
         </ul>
            <div class="panels">
             <div class="panel" id="panel2-1">This is panel1. This is panel1. This is panel1. This is panel1. This is panel1.</div>
                <div class="panel" id="panel2-2">This is panel2. This is panel2. This is panel2. This is panel2. This is panel2.</div>
                <div class="panel" id="panel2-3">This is panel3. This is panel3. This is panel3. This is panel3. This is panel3.</div>
                <div class="panel" id="panel2-4">This is panel4. This is panel4. This is panel4. This is panel4. This is panel4.</div>
            <!--/panels --></div>
        <!--/tabSet --></div>

    </div>


-----------------------------------------------------------------------
제이쿼리소스

$(function(){
 $('.tabSet').each(function(){
   // 사용할 요소 준비      
   var topDiv = $(this);
   var anchors = topDiv.find('ul.tabs a');
   var panelDivs =  topDiv.find('div.panel');
   // 마지막으로 클릭한 a 요소, 패널을 저장하기 위한 변수를 정의
   var lastAnchor;
   var lastPanel;
   // 탭부분을 표시
   anchors.show();

   //처음부터 열어 둘 패널을 취득
   /*filter메소드란 여러 요소중에 지정한 셀럭터의 요소를 추출하는 메소드-*/
   lastAnchor = anchors.filter('.on');  
   lastPanel = $(lastAnchor.attr('href'));

   //패널을 모두 숨기고 첫 패널만 열기
   panelDivs.hide();
   lastPanel.show();
   //이벤트를 설정
   anchors.click(function(event){
       //a요소 클릭의 디폴트 동작을 무효화
       event.preventDefault();
       //클릭된 a 요소, 해당패널을 취득
       var currentAnchor = $(this);
       var currentPanel = $(currentAnchor.attr('href'));
       
       lastAnchor.removeClass('on');//마지막에 클릭된 탭의 강조표시를 없앰
       currentAnchor.addClass('on');//클릭된 탭을 강조 표시 시킴
       lastPanel.hide();// 마지막에 열린 패널을 숨김
       currentPanel.show();//클린된 탭에 해당하는 패널을 표시
       
       // 다음의 처리를 위해 클릭된 a요소, 패널을 변수에 저장
       lastAnchor = currentAnchor;
       lastPanel = currentPanel;
           });
          });    
     });


-----------------------------------------------------------------------------------------------
위의 소스 중에서
lastAnchor = anchors.filter('.on');
lastPanel = $(lastAnchor.attr('href'));

<-- 저 두개는 몬 차이죠??

lastAnchor 라는 변수에 anchors.filter('.on'); -> 즉,  class on 에 관한 요소을 넣는거고  
lastPanel 라는 변수에 lastAnchor.attr('href')를; -> href 값을 추출해서 넣는거로 이해를 했는데요

lastPanel = $(lastAnchor.attr('href')); 를 윗줄처럼 lastPanel = lastAnchor.attr('href')로
바꾸면 동작을 안하더라구요...ㅠ.ㅜ;
lastAnchor와 lastPanel 둘 다 변수에 다 일정 값을 넣는 것 같은데요.


자바스크립트도 모르고 제이쿼리도 잘 모르는 디자이너라 간단한거에도 헤메고 있네요...ㅠ.ㅜ;;
아흐 ..플그램은 넘 어렵...ㅠ.ㅜ;