jquery 코어로 구현된 탭 소스 + 쿠키 제어

jquery 코어로 구현된 탭 소스 + 탭 쿠키 제어되게 했습니다.

http://tottoe.com/template/customer/mypage.php test 0000

그리고 상단 검색폼아래 `바로가기메뉴`도 초미니 ajax와 쿠키가 적용된 것입니다.

http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=84064 //쿠키 미적용

피드백 부탁드려요^^

<style type="text/css">

#tabbed_box_mypage {margin: 0 auto; width:660px;}

.tabbed_area {border:1px solid #EEE; background-color:#FBF2F6; padding:8px;}

ul.tabs {margin:0px; padding:0px; margin-top:5px; margin-bottom:6px;}

ul.tabs li {list-style:none; display:inline;}

ul.tabs li a {background-color:#FF4091; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #EEE; background-image:url(/img/tabs/tab_off.jpg); background-repeat:repeat-x; background-position:bottom;}

ul.tabs li a:hover {background-color:#ff40a4; border-color:#BF306D; border-bottom:none;}

ul.tabs li a.active {background-color:#ffffff; color:#282e32; border:1px solid #EEE; border-bottom: 1px solid #ffffff; background-image:url(/img/tabs/tab_on.jpg); background-repeat:repeat-x; background-position:top;}

.content {background-color:#ffffff; padding:10px; border:1px solid #EEE; font-family:Arial, Helvetica, sans-serif; background-image:url(/img/tabs/content_bottom.jpg); background-repeat:repeat-x; background-position:bottom;}

#content_1, #content_2, #content_3, #content_4, #content_5 {display:none;}

.content ul {margin:0px; padding:0px 20px;}

.content ul li {list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px;}

.content ul li:last-child {border-bottom:none;}

.content ul li a {text-decoration:none; color:#3e4346;}

.content ul li a small {color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px;}

.content ul li a:hover {color:#a59c83;}

.content ul li a:hover small {color:#baae8e;}

</style>

<!-- http://tottoe.com/js/jquery.cookie.pack.js -->

<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.2.6.pack.js" charset="UTF-8"></script>

<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.cookie.pack.js" charset="UTF-8"></script>

<div id="tabbed_box_mypage" class="tabbed_box">

  <div class="tabbed_area">

    <ul class="tabs">

      <li><a href="#" name="content_1" class="tab" title="" onfocus='this.blur()'>회원정보</a></li>

      <li><a href="#" name="content_2" class="tab" title="" onfocus='this.blur()'>예약내역</a></li>

      <li><a href="#" name="content_3" class="tab" title="" onfocus='this.blur()'>최근 등록글</a></li>

      <li><a href="#" name="content_4" class="tab" title="" onfocus='this.blur()'>포인트정책 및 권한</a></li>

      <li><a href="#" name="content_5" class="tab" title="" onfocus='this.blur()'>아카이브</a></li>

    </ul>

    <div id="content_1" class="content">

    내용1

    </div>

    <div id="content_2" class="content">

    내용2

    </div>

    <div id="content_3" class="content">

    내용3

    </div>

    <div id="content_4" class="content">

    내용4

    </div>

    <div id="content_5" class="content">

    내용5

    </div>

  </div>

</div>

<script type="text/javascript">

// jquery core tabs + cookie 2008년 12월 12일 금요일 플록

var $j = jQuery.noConflict();

$j(document).ready(function()

{

  var COOKIE_NAME = "mypage_tab_<?=$member['mb_id']?>";
  var COOKIE_DATA = $j.cookie(COOKIE_NAME);
  if (COOKIE_DATA)
  {
    $j("a.tab[@name="+COOKIE_DATA+"]").addClass("active");//name과 쿠키값 일치하는탭
    $j("#"+COOKIE_DATA).slideDown();
  }
  else
  {
    $j("a.tab[@name=content_1]").addClass("active");//기본값
    $j("#content_1").slideDown();
  }

  $j("a.tab").click(function (){
    // switch all tabs off
    $j(".active").removeClass("active");
    // del cookie
    $j.cookie(COOKIE_NAME, null, { path: '/' });
    // switch this tab on
    $j(this).addClass("active");
    // slide all content up
    $j(".content").hide();//slideUp 정신없다
    // slide this content up
    var content_show = $j(this).attr("name");
    // set cookie
    $j.cookie(COOKIE_NAME, content_show, { path: '/', expires: 10 });

    $j("#"+content_show).slideDown();
  return false;
  });

});

</script>