탭메뉴를 이용해서 div를 노출하고 싶은데
한 화면에서 견적서,납품서,사업자등록증 등을 볼 수 있는 페이지를 만들고 싶은데요.
뭐가 잘 못 된건지...도저히 찾을 수가 없네요~
<!---------------------------------소 스---------------------------------->
<table cellpadding="0" cellspacing="0" border="0">
<tr><!--영수증 타이틀-->
<td ALIGN="CENTER">
<img src="/data/orangemall/estimate_banner.jpg" alt="타이틀" align="absmiddle">
</td>
</tr>
<tr>
<td ALIGN="CENTER" class="center_line01">
<div id="css_tabs">
<input id="tab1" type="radio" name="tab" checked="checked" />
<input id="tab2" type="radio" name="tab" />
<input id="tab3" type="radio" name="tab" />
<label for="tab1">견적서</label>
<label for="tab2">납품서</label>
<label for="tab3">사업자등록증</label>
<tr><td class="center_line01"><div style="margin:2px 0px;border:solid 2px #d4d4d4; "></div></td></tr>
<tr>
<td class="center_line01">
<div id="print" style="padding:0 15px;"></div>
</td>
</tr>
<tr><td class="center_line01"><div style="margin:2px 0px;border:solid 2px #d4d4d4; "></div></td></tr>
</table>
<div class="tab1_content">
<div class="cart-estimate">
<div class="page-header">
<h3>견적서</h3>
<div class="btn-group">
<button class="skinbtn default fi-login js-print hidden-print">인쇄하기</button>
</div>
</div>
<div class="hidden-print">
<div class="panel panel-default">
<div class="panel-heading">견적서</div>
<div class="panel-body">
<p>※ 견적서에 기재된 판매가는 쿠폰, 타임세일 판매가, 배송비가 제외된 금액입니다.</p>
<p> 실제 주문 시, 거래명세서에 기재된 금액과 차이가 날 수 있습니다.</p>
</div>
</div>
</div>
<hr style="border:1px dashed #d9d9d9; width:500px;" />
<div class="contents">
<table width="100%">
<col width="10%" />
<col width="60%" />
<col width="30%" />
<tr>
<td style="line-height: 36px; background-color: #F6F6F6;">공<br>급<br>자</td>
<td>
<table width="100%">
<tr>
<td>등록번호</td>
<td colspan="3">{gMall.businessNo}</td>
</tr>
<tr>
<td style="line-height: 12px;">상 호<br>(법인명)</td>
<td style="width: 40%">{gMall.companyNm}</td>
<td>성 명</td>
<td>{gMall.ceoNm}</td>
</tr>
<tr>
<td style="line-height: 12px;">사 업 장<br>소 재 지</td>
<td colspan="3">{gMall.address} {gMall.addressSub}</td>
</tr>
<tr>
<td>업 태</td>
<td style="width: 40%">{gMall.service}</td>
<td>종 목</td>
<td>{gMall.item}</td>
</tr>
<tr>
<td>연 락 처</td>
<td colspan="3">{gMall.phone}</td>
</tr>
<tr>
<td>팩스번호</td>
<td colspan="3">{gMall.fax}</td>
</tr>
</table>
</td>
<td>
<p><div style="text-decoration:underline; line-height: 36px;"><b>견적일: {=date('Y년 m월 d일')}</b></div></p>
<p><div><input type="text" name="memNm" size="20" value="{memNm}" style="border: 0; border-bottom: 1px solid; color: #000000;" onkeyup="check_memNm(this, 18, true)"><input type="text" readonly="readonly" size="3" value="귀하" style="border: 0; border-bottom: 1px solid; color: #000000;"></div></p>
<p><div style="line-height: 36px;">아래와 같이 견적합니다.</div></p>
</td>
</tr>
</table>
<table width="100%">
<col width="10%" />
<col width="50%" />
<col width="15%" />
<col width="10%" />
<col width="15%" />
<thead>
<tr style="background-color: #F6F6F6; height: 24px;">
<td>번호</td>
<td>상품명</td>
<td>판매가</td>
<td>수량</td>
<td>상품구매금액</td>
</tr>
</thead>
<!-- 상품리스트 -->
<tbody>
<!--{ @ cartInfo }-->
<!--{ @ .value_ }-->
<!--{ @ ..value_ }-->
<tr>
<td>{...estimateNo}</td>
<td style="text-align: left;">{...goodsNm}
<!--{ @ ...option }-->
<!--{ ? ....optionName }-->
<dl>
<dt class="name">{....optionName} :</dt>
<dd>{....optionValue}
<!--{ ? ....optionPrice != 0 }-->
(<!--{ ? ....optionPrice > 0 }-->+<!--{ / }-->{=gd_currency_display(....optionPrice)})
<!--{ / }-->
</dd>
</dl>
<!--{ / }-->
<!--{ / }-->
<!--{ @ ...optionText }-->
<!--{ ? ....optionValue }-->
<dl>
<dt class="name">{....optionName} :</dt>
<dd>{....optionValue}
<!--{ ? ....optionTextPrice != 0 }-->
(<!--{ ? ....optionTextPrice > 0 }-->+<!--{ / }-->{=gd_currency_display(....optionTextPrice)})
<!--{ / }-->
</dd>
</dl>
<!--{ / }-->
<!--{ / }-->
</td>
<td>{=gd_currency_display(...price.goodsPrice + ...price.optionPrice + ...price.optionTextPrice)}</td>
<td>{...goodsCnt}</td>
<td>{=gd_currency_display((...price.goodsPrice + ...price.optionPrice + ...price.optionTextPrice) * ...goodsCnt)}</td>
</tr>
<!--{ ? ...addGoods }-->
<!--{ @ ...addGoods }-->
<tr>
<td></td>
<td style="text-align: left;">{....addGoodsNm}
<!--{ ? ....optionNm }-->
<dl>
<dt class="name">옵션 :</dt>
<dd>{....optionNm}</dd>
</dl>
<!--{ / }-->
</td>
<td>{=gd_currency_display(....addGoodsPrice)}</td>
<td>{....addGoodsCnt}</td>
<td>{=gd_currency_display(....addGoodsPrice * ....addGoodsCnt)}</td>
</tr>
<!--{ / }-->
<!--{ / }-->
<!--{ / }-->
<!--{ / }-->
<!--{ / }-->
<tr height="22">
<td colspan="5" style="text-align: center;">*** 이 하 여 백 ***</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!-- 추가 정보 -->
<table width="100%" style="background-color: #F6F6F6;">
<tr>
<td>합 계</td>
<td>{=gd_currency_display(totalPrice)}</td>
</tr>
<tr>
<td>입금계좌</td>
<td>{bankAccount.bankName} {bankAccount.accountNumber} {bankAccount.depositor}</td>
</tr>
</table>
</div>
<tr>
<td class="center_line01" width="100%;"align="center" height="40">
<a href="javascript:window.close();"><img src="/data/sigong/templet/basic/sigong_img/order_close.gif" alt="닫기버튼" ></a>
</td>
</tr>
</div><!--견적서 E-->
</div><!--탭메뉴.tab1_content E-->
<div class="tab2_content">Tab2 내용
<br />근 인력거꾼의 그 라디오로 한다느니보다 바이며, 왜 2위는 충실하였다. 말라서 듯이 높게 또 가지고 것이다. 궂은 같은 끝나가고 소리가 김첨지는 쳐보았건만, 액수에 후려갈겼다. 그 속에서 하고 과한데.</div>
<div class="tab3_content">Tab3 내용
<br />사십 듯이 만들 황급하였다. 말조차 벌던 방학을 있었다. 그러자, 날리고 젠장맞을 없었다. 보배를 수 조금 남은 없네, 있다. 그는 은전이 원 수 띄었다. 아씨, 하고 천하를 그들의 모든 병자에 뿐이다.</div>
</td>
</tr>
</div><!--css_tabs E-->
<div id="edufine_body1" style="display:none;"><img src="/data/sigong/templet/basic/bisiness_data/edufine_consent.jpg" width="530"></div>
<div id="bankbook_body" style="display:none;"><img src="/data/sigong/templet/basic/bisiness_data/bankbook.jpg" width="530"></div>
<div id="bisiness_body" style="display:none;"><img src="/data/sigong/templet/basic/bisiness_data/bisiness.jpg" width="530"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.js-print').on('click', function() {
window.print();
});
});
// 사용자이름 입력 제한에 따른 추가라인 생성 및 삭제
function check_memNm(obj, maxByte, addInputFl) {
var memNm = obj.value;
var memNmLength = memNm.length;
var totalByte = 0;
var limit = 0;
if (memNmLength == 0) {
// 입력한 값이 없으면 라인 삭제
if ($('input[name="subMemNm"]').length && (event.which === 8 || event.which === 46)) {
$('input[name="' + obj.name + '"]').remove();
if (obj.name == 'memNm') {
$('input[name="subMemNm"]').attr('name', 'memNm');
} else if (obj.name == 'subMemNm') {
$('input[name="memNm"]').attr('size', 20);
}
$('input[name="memNm"]').attr('onkeyup', 'check_memNm(this, 18, true)');
$('input[name="memNm"]').focus();
}
} else {
// 한글(2), 그 외 문자(1), 제한영역 계산
for (var i = 0; i < memNmLength; i++) {
if (encodeURIComponent(memNm.charAt(i)).length > 3) {
totalByte += 2;
} else {
totalByte++;
}
if (totalByte <= maxByte) {
limit = i + 1;
}
}
}
// 제한영역을 넘었을시 추가라인 생성
if (totalByte > maxByte) {
obj.value = memNm.substr(0, limit);
if (addInputFl == true) {
$('input[name="memNm"]').attr('onkeyup', 'check_memNm(this, 18)');
$('input[name="memNm"]').after($('input[name="memNm"]').clone().attr('name', 'subMemNm'));
$('input[name="memNm"]').attr('size', 25);
$('input[name="subMemNm"]').val('');
}
}
}
</script>
<!--[튜닝] 탭메뉴 S-->
<style type="text/css">
#css_tabs {
font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif
}
/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1), #css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2), #css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) {
display:none
}
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1), #css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2), #css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) {
display:block
}
/* 라벨 기본 스타일 지정 */
#css_tabs > label {
display:inline-block;
font-variant:small-caps;
font-size:.9em;
padding:5px;
text-align:center;
width:20%;
line-height:1.8em;
font-weight:700;
border-radius:3px 3px 0 0;
background:#eee;
color:#777;
border:1px solid #ccc;
border-width:1px 1px 0
}
#css_tabs > label:hover {
cursor:pointer
}
#css_tabs label[for=tab1] {
margin-left:1.5em
}
/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover {
background:tomato;
color:#fff
}
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover {
background:gold;
color:#fff
}
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover {
background:green;
color:#fff
}
/* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content {
padding:2em;
border:1px solid #ddd;
width:70%;
height:100%
}
</style><!--탭메뉴 E-->
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인