탭메뉴를 이용해서 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
아 이렇게 길면 답변이 거의 받기가 힘이 들것 같네요
답변이 길면 답변자들이 그냥 패스하는 경우가 많으니
핵심만 요약해서 질문하시거나
최대한 모르는 것을 범위를 좁혀서 질문하시어야 답변이 달릴것 같습니다
저도.. 어지러우니 끝까지 보지 않게 되네요
너무 어려우시면 의뢰게시판에 남기시면 될거 같아요
어렵지 않을거 같으니 작은 금액으로 될것으로 보입니다
아무튼 성공하세요^^
