스크립트 질문입니다.

스크립트 질문입니다.

QA

스크립트 질문입니다.

답변 1

본문

회원님들 휴일 잘 쉬고 계신가요?

해결안되는 코드 문의 드립니다.


<script type="text/javascript">
 <!--
function ShowTabex(val){
   for (i=0; i<3; i++) {
     var tb = document.getElementById('tab_' + i);
     if (i != val) tb.style.display = "none";
     else tb.style.display = "block";
   }
 }
 //-->
 </script>

<div style="text-align: right;">
   <div style="border: 1px solid rgb(204, 204, 204);">
   <span onclick="ShowTabex('0')" style="padding: 0pt 5px; cursor: pointer;">tab_0 보기</span>
   <span onclick="ShowTabex('1')" style="padding: 0pt 5px; cursor: pointer;">tab_1 보기</span>
   <span onclick="ShowTabex('2')" style="padding: 0pt 5px; cursor: pointer;">tab_2 보기</span>
   </div>
 </div>
 <div style="text-align: center;">
   <div id="tab_0" style="width: 100%; display: none;">
     tab_0의 내용입니다.
   </div>
   <div id="tab_1" style="width: 100%; display: none;">
     tab_1의 내용입니다.
   </div>
   <div id="tab_2" style="width: 100%; display: none;">
     tab_2의 내용입니다.
   </div>
 </div>
<div style=height:100px;background:#000></div>

 

위 소스에서 tab_0 보기 를 클릭하면 그에 해당하는 내용이 보입니다.

여기서 tab_0 보기 를 한번 더 클릭하면 해당내용이 안보이게 할려면 어떻게 수정해야 하는지요?

나머지 탭도 같은 방식을 하고 싶습니다.

귀한 휴일에 깨어 계신 회원님들의 도움을 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 1

https://codepen.io/sklee227/pen/BPmmmJ

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로