ul 탭소스입니다 ㅜ
본문
<a onmouseover="changePolicyTab('1'); return false;" href="#" id="policyTab1">1번대상</a> |
<a onmouseover="changePolicyTab('2'); return false;" href="#" id="policyTab2">2번대상</a>
<a onmouseover="changePolicyTab('3'); return false;" href="#" id="policyTab2">2번대상</a>
<a onmouseover="changePolicyTab('4'); return false;" href="#" id="policyTab2">2번대상</a>
<a onmouseover="changePolicyTab('5'); return false;" href="#" id="policyTab2">2번대상</a>
<ul id="policyTab_1">
<li>1</li>
</ul>
<ul id="policyTab_2" style="display:none">
<li>2</li>
</ul>
<ul id="policyTab_3" style="display:none">
<li>3</li>
</ul>
</body>
</html>
<script type="text/javascript">
function changePolicyTab(arg){
for(i=1;i<=2;i++) {
document.getElementById("policyTab_"+i).style.display = "none";
}
document.getElementById("policyTab_"+arg).style.display = "block";
}
</script>
이런식으로 7개의 탭을 만들예정입니다
그런데 세번째 탭가지보고 첫번째로 돌아갔을때 뒤에 컨텐츠 부분까지 첫번째에 다보입니다..ㅜㅜ
무엇이 문제일까요?
답변 4
7개 출력 예제
<script type="text/javascript">
function changePolicyTab(arg){
for(i=1;i<=7;i++) {
document.getElementById("policyTab_"+i).style.display="none";
}
document.getElementById("policyTab_"+arg).style.display="block";
}
</script>
<a href="javascript:void(0);" id="policyTab1" onmouseover="changePolicyTab('1'); return false;">1번대상</a> |
<a href="javascript:void(0);" id="policyTab2" onmouseover="changePolicyTab('2'); return false;">2번대상</a> |
<a href="javascript:void(0);" id="policyTab3" onmouseover="changePolicyTab('3'); return false;">3번대상</a> |
<a href="javascript:void(0);" id="policyTab4" onmouseover="changePolicyTab('4'); return false;">4번대상</a> |
<a href="javascript:void(0);" id="policyTab5" onmouseover="changePolicyTab('5'); return false;">5번대상</a> |
<a href="javascript:void(0);" id="policyTab6" onmouseover="changePolicyTab('6'); return false;">6번대상</a> |
<a href="javascript:void(0);" id="policyTab7" onmouseover="changePolicyTab('7'); return false;">7번대상</a>
<ul id="policyTab_1">
<li>1번 출력</li>
</ul>
<ul id="policyTab_2">
<li>2번 출력</li>
</ul>
<ul id="policyTab_3">
<li>3번 출력</li>
</ul>
<ul id="policyTab_4">
<li>4번 출력</li>
</ul>
<ul id="policyTab_5">
<li>5번 출력</li>
</ul>
<ul id="policyTab_6">
<li>6번 출력</li>
</ul>
<ul id="policyTab_7">
<li>7번 출력</li>
</ul>
for(i=1;i<=2;i++) {
이 부분이 문제입니다.
for(i=1;i<=5;i++) { 처럼 전체 탭 개수에 맞아야 하고
html 부분도 id="..." 부분도 탭 개수에 맞아야 합니다.
스크립트가 너무 유동적으로 작성되지 않아서 위와 같은 귀찮은 문제들이 생기는 겁니다.
어떻게고쳐야하나요...?
이전 질문에 이미 답변을 소스로 올려드렸는데요.
자바스크립트 소스중
for(i=1;i<=2;i++) {
위에 소스를 찾아서 2란 수치를 7로 변경해 보세요..
7로 변경후에 두번째탭부터 전부 안보입니다 ㅜㅜ
위 코드 기반으로 7개로 한다고 하면
<meta charset="UTF-8" />
<script type="text/javascript">
function changePolicyTab(arg){
for(i=1;i<=7;i++) {
document.getElementById("policyTab_"+i).style.display = "none";
}
document.getElementById("policyTab_"+arg).style.display = "block";
}
</script>
<a onmouseover="changePolicyTab('1'); return false;" href="#" id="policyTab1">1번대상</a> |
<a onmouseover="changePolicyTab('2'); return false;" href="#" id="policyTab2">2번대상</a>
<a onmouseover="changePolicyTab('3'); return false;" href="#" id="policyTab2">3번대상</a>
<a onmouseover="changePolicyTab('4'); return false;" href="#" id="policyTab2">4번대상</a>
<a onmouseover="changePolicyTab('5'); return false;" href="#" id="policyTab2">5번대상</a>
<a onmouseover="changePolicyTab('6'); return false;" href="#" id="policyTab2">6번대상</a>
<a onmouseover="changePolicyTab('7'); return false;" href="#" id="policyTab2">7번대상</a>
<ul id="policyTab_1">
<li>1</li>
</ul>
<ul id="policyTab_2" style="display:none">
<li>2</li>
</ul>
<ul id="policyTab_3" style="display:none">
<li>3</li>
</ul>
<ul id="policyTab_4" style="display:none">
<li>4</li>
</ul>
<ul id="policyTab_5" style="display:none">
<li>5</li>
</ul>
<ul id="policyTab_6" style="display:none">
<li>6</li>
</ul>
<ul id="policyTab_7" style="display:none">
<li>7</li>
</ul>
와 같이 하셔야 합니다.
