[Jquery]tab구현-버젼2

Jquery

function branchSubMain(){

var branchNum = jQuery(".lecture_cont").length;//목록 갯수

var branchUnitW = jQuery(".lecture_cont").width();//목록 넓이

var branchUnitNum = jQuery(".lecture_list_test .lecture_cont").length;//목록 갯수

var branchArea = jQuery(".recom_lecture_menu");//페이징 버튼 ul

var branchContSet = jQuery(".lecture_list_test");//목록 부모박스

if(branchUnitNum > 2){ //두개 이상부터 버튼 생성

for(var i=1; i<=branchNum; i++){

var rel = i - 1;

jQuery('<li><a rel="'+ rel +'"href="#lecture_cont"'+i+'>인기/추천강좌 탭 '+i+'번째</a></li>\n').appendTo(branchArea);

//페이징 버튼생성

}

branchArea.find(">li").eq(0).addClass("on");//첫번째는 항상 활성화

var branchNav = branchArea.find(">li");//페이징 버튼 ul li

branchNav.click(function(){

var order = jQuery(this).find("a").attr("rel") * 1;//페이징 버튼 갯수

var branchSetX = -(branchUnitW * order);//목록 넓이 * 페이징 버튼 갯수

branchContSet.css("left",branchSetX);//목록 가로 이동 넓이

branchArea.find("li").removeClass("on");//페이징 버튼 비활성화

jQuery(this).addClass("on");//페이징 버튼 활성화

});

}

Html

</ul>

<dl>

</dl>

<dl>

</dl>

</div>

</div>

</div>

Practice Makes Perfect!