jquery load(html 로드하기)및 A,img 링크걸기

오늘 잡(Job)은 탭을 눌렀을 때 컨텐츠 부분을 jquery load를 써서 로딩하고 선택된 탭의 이미지를 바꾸는 

작업이다. 보면 그냥 알것같다. 좋지 않은 소스지만 필요하신 분들이 있을까봐 그냥 써본다.


$(document).ready(function () {
        var aSeq = 0;
        var imgSeq = 0;
        $('.coach_Tab a').each(function () {
            aSeq++;
            $(this).attr('href', 'javascript:fn_bindContents('+aSeq+')');
        });
        $('.coach_Tab img').each(function () {
            imgSeq++;
            $(this).attr('id', 'tab' + imgSeq.toString());
        });
        fn_bindContents(1);
    });
    function fn_bindContents(index) {
        $('.coach_Tab img').each(function () {
            var src = $(this).attr('src');
            $(this).attr('src',src.replace("_on", ""));
        });
        if (index > 9)
            $('#tab' + index).attr('src', '/image/school/junior/parentsRoom/tab_' + index + '_on.jpg');
        else
            $('#tab' + index).attr('src', '/image/school/junior/parentsRoom/tab_0' + index + '_on.jpg');
        $('#contents').load('/ParentsRoom/html/Index'+index+'.html');
     }


  <div class="coach_Tab">

                    <dl>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_01_on.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_02.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_03.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_04.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_05.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_06.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_07.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_08.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_09.jpg"/></a></dd>
                        <dd>
                            <a>
                                <img src="/image/school/junior/parentsRoom/tab_10.jpg"/></a></dd>
                    </dl>
                </div>
                <div id="contents">
                </div>   



우리 회사는 css보다는 image를 너무 사랑한다. 글씨 하나도 image로 만들다니 .....이런



힘이 없는 나는 탭을 클릭할때마다 이미지를 바꿔준다. surffix으로 붙는 _on 이미지가 선택된 이미지다



css면 좀더 편할것을 그냥 간단하게 coach_Tab 클래스 밑에 있는 이미지를 원래대로 초기화 하고 


선택된 이미지의 경로의 src를 조작하여 _on을 추가한다.


아 참 뭔일이 ㅋㅋ