탭을 만들고 있는데요..........

아무리 찾아봐도 코드 자체에는 문제가 없는데

아래 빨간색 코드를 적용하면 정상 작동이 안합니다 ;;;;;;;;;

고수님들 한번 확인 부탁드립니다

<style>
ul.tabs {
    height: 40px;
 width:1000px;
}
ul.tabs li {
    float: left;
    text-align:center;
    cursor: pointer;
    width:123px;
    height: 40px;
    line-height:40px;
    border: 1px solid #eee;
    font-weight: bold;
    background: #fafafa;
    overflow: hidden;
    position: relative;
 font-size:16px;
 margin-left:-1px;
}
ul.tabs li.active {
    background: #da5aa2;
 color:#ffffff;
}
.tab_container {
    clear: both;
    float: left;
}
.tab_content {
    display: none;
}

 #container {
    width:1000px;
    margin: 0 auto;
}

.tab_content h3 {height:34px;line-height:34px;font-size:30px;background-color:#ededed;color:#555555;font-weight:bold;display:block;}
.tab_content p {display:none;font-size:16px;background-color:#f6f6f6;color:#555555;font-weight:normal;line-height:24px;padding:20px;width:960px;}
</style>

<div id="container">
    <ul class="tabs">
        <li class="active" rel="tab1">상품관련</li>
        <li rel="tab2">회원정보</li>
        <li rel="tab3">주문결제</li>
  <li rel="tab4">배송관련</li>
  <li rel="tab5">영수증/계산서</li>
  <li rel="tab6">오버클럭</li>
  <li rel="tab7">기술 및 A/S</li>
  <li rel="tab8">기타</li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">

<h4 Onclick="openTitle('a1');">[상품관련] 견적상담은 어떻게 하나요?</h>
<p id="tab_a1" class="cont_layer">
견적 상담은 아래와 같은 방법을 통하여 접수하실 수 있습니다.<br />
- 홈페이지 우측 상단의 온라인 견적 메뉴에서 견적 문의를 하고자 하는 부품 구성을 선택한 뒤 '호환/견적상담' 버튼을 클릭<br />
이렇게 한 뒤 제목과 PC의 가격대 등의 정보와 고객님의 PC 용도 등 견적 문의 담당자에게 전달하고자 하는 사항을 최대한 자세히 적어주시면 그 내용을 바탕으로 답변을 드리고 있습니다.
</p>

<h4 Onclick="openTitle('a2');">[상품관련] PC에 복구 이미지(고스트)를 포함시킬 수 있나요?</h4>
<p id="tab_a2" class="cont_layer">
운영체제 복원 솔루션(고스트, 트루이미지 등)은 상용 소프트웨어로서 운영체제 및 해당 소프트웨어를 함께 구매하는 경우를 제외하면 별도의 복구 파티션 작업을 하지 않고 있으며, 운영체제 정품을 구매한 경우 차후 고객님께서 재설치가 가능하도록 운영체제 원본 DVD/USB와 PC의 각종 드라이버 미디어를 제품 보증서와 함께 제공하여 드리고 있습니다.
</p>

<h4 Onclick="openTitle('a3');">[상품관련] 현금영수증이나 세금계산서를 발행받을 수 있나요?</h4>
<p id="tab_a3" class="cont_layer">
...의 모든 제품은 고객님의 구매 이력 보호 및 올바른 유통 구조 확립, 제품의 워런티 보호를 위해모든 제품에 대하여 현금(카드)영수증, 세금계산서가 포함된 가격으로 제공하고 있으며, 무자료 거래 근절을 위해 노력하고 있습니다.

</p>

<h4 Onclick="openTitle('a4');">[상품관련] 원하는 제품이 사이트에 없는데 구매 가능하나요?</h4>
<p id="tab_a4" class="cont_layer">
저희 ...는 고객님께 가치있고 최고의 성능을 발휘할 수 있는 프리미엄 제품을 합리적인 가격에 공급하는 것을 최우선 목표로 삼고 있습니다.<br /><br />
그리하여 취급 상품 가운데 원하시는 상품이 없는 경우가 있을 수 있으나 이 경우 맞춤 견적 또는 고객지원센터로 문의 주시면 주문 확인 후 원하는 제품에 대해서 국내 정식 유통을 거친 제품에 한하여 빠르게 제공해드리겠습니다.<br /><br />
■ ... 견적문의센터<br />
<br /><br />
■ ... 고객지원센터<br />

</p>

<h4 Onclick="openTitle('a5');">[상품관련] 대량 구매는 어떻게 해야 하나요?</h4>
<p id="tab_a5" class="cont_layer">
대량 구매를 하고자 하시는 경우 1:1 문의 또는 고객지원센터로 전화 연락을 주시면 담당 MD가 별도로 견적/구매 상담을 도와드리고 있습니다.<br /><br />

</p>

<h4 Onclick="openTitle('a6');">[상품관련] 정품 운영체제를 구매하면 CD를 제공해주나요?</h4>
<p id="tab_a6" class="cont_layer">
저희 ...에서 판매하는 운영체제는 DVD 또는 USB 타입의 정품 제품이며, 미디어를 제공하지 않는 OEM 버전이 아닌 설치 원본이 반드시 제공되는 버전만 취급하고 있습니다.<br /><br />
* 마이크로소프트 오픈마켓 파트너사의 쇼핑몰을 통해 구입하지 않은 제품은 공식 총판의 지원을 받지 못하는 불이익이 발생할 수 있습니다.
</p>

<h4 Onclick="openTitle('a7');">[상품관련] 부품 제조사에서 하는 이벤트로 적용되나요?</h4>
<p id="tab_a7" class="cont_layer">
...는 거의 모든 부품 제조사, 수입사와 전략 파트너쉽을 맺고 있습니다.<br />
이에따라 부품 제조사에서 하는 이벤트 또한 완본체 이벤트로 적용받으실 수 있습니다.<br />
즉, PC구입시 각 부품내역에 맞는 제조사 이벤트 또한 적용해드리고 있습니다.
</p>

<h4 Onclick="openTitle('a8');">[상품관련] 새 제품이 도착했는데 파손이 된경우 어떻게 처리되나요?</h4>
<p id="tab_a8" class="cont_layer">
수령하신 제품이 파손되었을 경우 고객님의 불편을 최소화하기 위하여 ...와 택배사 사이에 처리를 직접 하며, 고객님께서는 ... 고객지원센터에 접수 및 택배사를 통한 파손 접수만 해주시면 됩니다.<br />
운송장이 붙어있는 박스 및 제품은 배송받은 상태 그대로 자세히 사진촬영을 하신 후 버리지말고 보관해 두었다가 택배사에 파손접수 후 반송하여 보내주시면 제품을 교환받으실 수 있습니다.<br />
...의 모든 택배 배송은 파손보험특약이 가입되어있어 배송중에 발생하는 모든 파손에 대해서 대비책을 제공하고 있습니다.<br />
불편을 최소화하도록 최대한 신속하게 처리해 드리겠습니다.
</p>

<h4 Onclick="openTitle('a9');">[상품관련] 제품의 판매가격이 왜 변동되나요?</h4>
<p id="tab_a9" class="cont_layer">
...의 제품은 정식 시장에서 유통이 되고 있는 정품 인증 부품으로만 본체를 구성하고 있으며, 재고 상품이 아닌 늘 최신 제품을 입고하여 PC를 제조하고 있습니다.<br />
대부분의 PC부품은 국내 생산이 아닌 수입 품목으로 환율에 영향을 받으며, 시장의 부품 시세에 따라 제품의 가격 및 제원이  변동될 수 있습니다.<br />
그리하여 제품의 가격은 지속적으로 변동이 되며, 같은 모델명임에도 이후 제품의 제원이 부분적으로 변경될 수 있습니다. <br />
다만 제품 주문(결제) 이후 부품의 가격 변동이 있더라도 별도의 비용을 청구하지는 않습니다.
</p>

<h4 Onclick="openTitle('a10');">[상품관련] ...에서 판매하는 상품은 모두 정품, 새제품인가요?</h4>
<p id="tab_a10" class="cont_layer">
...에서 판매하는 자체 컴퓨터 상품은 모두 국내 정식 워런티가 가능한 정품 및 새 제품입니다.<br /><br />
또한 제조사 기반의 최신 시리얼의 제품만을 취급하고 있어 하드웨어와 소프트웨어(바이오스)간의 통신이 완벽히 소화되는 부품만 공급하고 있습닏다.<br />
고객과의 약속을 지키기위해 비정품, 중고부품 사용시 200% 보상 정책을 시행하고 있습니다.<br />
믿음의 ... 약속드립니다.<br /><br />
※ ...의 브랜드 컴퓨터 이외의 고객님께서 자체적으로 견적을 요청하시어 주문하시는 PC 또는 단품 부품 또한 모두 정품 및 새제품입니다.
</p>

<h4 Onclick="openTitle('a11');">[상품관련] 직접 제작까지 해주시는 건가요?</h4>
<p id="tab_a11" class="cont_layer">
저희 ...는 인텔 스카이레이크 데스크탑 부분 대표 브랜드로 인정된 업체로써 고객님께서 홈페이지를 통해 구매하신 완제품 본체를 주문결제가 완료된후 담당 엔지니어가 배정되어 조립뿐만아닌 및 제품 정상작동 테스트 확인을 거쳐 검수가 완료된 상품을 안전하게 2중으로 포장하여 발송해 드리고 있습니다.<br />
완제품이 아닌 부품별도로 구매하신 고객님께서도 부품을 주문하실 별도의 조립비를 추가로 선택하시면 당사에서 조립 및 테스트를 완료하여 발송해 드립니다.
</p>

        </div>
        <div id="tab2" class="tab_content">탭2</div>
        <div id="tab3" class="tab_content">탭3</div>
        <div id="tab4" class="tab_content">탭4</div>
        <div id="tab5" class="tab_content">탭5</div>
     <div id="tab6" class="tab_content">탭6</div>
        <div id="tab7" class="tab_content">탭7</div>
     <div id="tab8" class="tab_content">탭8</div>
    </div>
    <!-- .tab_container -->
</div>
<!-- #container -->

<script type="text/javascript">
$(function () {

    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#333");
        $(this).addClass("active").css("color", "darkred");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });
});

function openTitle(wr){

 var c_dis=$("#tab_"+wr).css("display");

 if(c_dis=="none") {
  $(".cont_layer:visible").fadeOut("fast");
  $("#tab_"+wr).fadeIn("fast");
 }
 else $("#tab_"+wr).fadeOut("fast");
}
</script>