테스트 사이트 - 개발 중인 베타 버전입니다

ul 탭소스입니다 ㅜ 채택완료

kkk2222223 8년 전 조회 2,405

1번대상

2번대상

2번대상

2번대상

2번대상 

 

     

  • 1
  •  

     

 

 

 

 

 

 

이런식으로 7개의 탭을 만들예정입니다

그런데 세번째 탭가지보고 첫번째로 돌아갔을때 뒤에 컨텐츠 부분까지 첫번째에 다보입니다..ㅜㅜ

무엇이 문제일까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
8년 전
@https://sir.kr/bbs/profile.php?mb_id=kwh2212" class="sv_member" title="kkk2222223 자기소개" target="_blank" style="color: rgb(0, 0, 0); text-decoration-line: none;">kkk2222223

7개 출력 예제

1번대상 |

2번대상 |

3번대상 |

4번대상 |

5번대상 |

6번대상 |

7번대상 

  • 1번 출력

  • 2번 출력

  • 3번 출력

  • 4번 출력

  • 5번 출력

  • 6번 출력

  • 7번 출력

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

8년 전

위 코드 기반으로 7개로 한다고 하면

</p><p><meta charset="UTF-8" /></p><p><script type="text/javascript"> </p><p>function changePolicyTab(arg){ </p><p>    for(i=1;i<=7;i++) { </p><p>    document.getElementById("policyTab_"+i).style.display = "none"; </p><p>    } </p><p>    document.getElementById("policyTab_"+arg).style.display = "block"; </p><p>} </p><p></script> </p><p>
</p><p><a onmouseover="changePolicyTab('1'); return false;"  href="#" id="policyTab1">1번대상</a> | </p><p><a onmouseover="changePolicyTab('2'); return false;"  href="#" id="policyTab2">2번대상</a> </p><p><a onmouseover="changePolicyTab('3'); return false;"  href="#" id="policyTab2">3번대상</a> </p><p><a onmouseover="changePolicyTab('4'); return false;"  href="#" id="policyTab2">4번대상</a> </p><p><a onmouseover="changePolicyTab('5'); return false;"  href="#" id="policyTab2">5번대상</a> </p><p><a onmouseover="changePolicyTab('6'); return false;"  href="#" id="policyTab2">6번대상</a> </p><p><a onmouseover="changePolicyTab('7'); return false;"  href="#" id="policyTab2">7번대상</a> </p><p>
</p><p> <ul id="policyTab_1"> </p><p>    <li>1</li> </p><p> </ul> </p><p> <ul id="policyTab_2" style="display:none"> </p><p>    <li>2</li> </p><p> </ul> </p><p> <ul id="policyTab_3" style="display:none"> </p><p>    <li>3</li> </p><p> </ul> </p><p> <ul id="policyTab_4" style="display:none"> </p><p>    <li>4</li> </p><p> </ul> </p><p> <ul id="policyTab_5" style="display:none"> </p><p>    <li>5</li> </p><p> </ul> </p><p> <ul id="policyTab_6" style="display:none"> </p><p>    <li>6</li> </p><p> </ul> </p><p> <ul id="policyTab_7" style="display:none"> </p><p>    <li>7</li> </p><p> </ul> </p><p>

와 같이 하셔야 합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

8년 전

이전 질문에 이미 답변을 소스로 올려드렸는데요.

자바스크립트 소스중

for(i=1;i<=2;i++) {  

위에 소스를 찾아서 2란 수치를 7로 변경해 보세요.. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

k
kkk2222223
8년 전
7로 변경후에 두번째탭부터 전부 안보입니다 ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

8년 전

</p><p><span style="color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;">for(i=1;i<=2;i++) { </span> </p><p>

이 부분이 문제입니다.

</p><p style="font-size: 14.6667px;"><span style="color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;">for(i=1;i<=5;i++) { </span> 처럼 전체 탭 개수에 맞아야 하고</p><p style="font-size: 14.6667px;">

html 부분도 id="..." 부분도 탭 개수에 맞아야 합니다.

스크립트가 너무 유동적으로 작성되지 않아서 위와 같은 귀찮은 문제들이 생기는 겁니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

k
kkk2222223
8년 전
어떻게고쳐야하나요...?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인