테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

스크립트 링크 문의 채택완료

초이스2010 9년 전 조회 3,138
답변 3
목록

안녕하세요.

본 사이트에서 찾은 간단한 소스 입니다. 다른곳에 활용 하려고 하는데

아래의 소스에 텍스트로 된 부분을 이미지로 대체 하려고 하는데 잘 안되네요

아시는분 도움 부탁 드립니다.

감사 합니다.

<a href='javascript:void(0)' onclick=this.innerHTML=(this.nextSibling.style.display=='none')?'친구목록감추기':'친구목록보기';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>친구목록 보기</a><DIV style='display:none'>
<div style="border:1px solid #99CCFF; padding:9px;">
친구1<br>
친구2<br>
</DIV></DIV> 

#그누보드4 #펼침메뉴 #스크립트
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
깜
깜봉
9년 전

제가보기엔 다 텍스트 같아 보이는데.... 

우선 너무 네이티브적인 스크립트라서 좀 풀어 보았습니다.

그리고 버튼 부분만 일단 이미지로 변경하여 두가지 예시로 보여드립니다.

 

</p><p><h4>텍스트변경</h4></p><p><a href="javascript:;" onclick="change();" id="btn">친구목록보기</a></p><p><div id="list" style="display:none;border:1px solid #99CCFF; padding:9px;"></p><p>친구1
</p><p>친구2
</p><p> </p><p></div></p><p> </p><p><script></p><p>function change(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>var button = document.getElementById('btn');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>var list = document.getElementById('list');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>if(button.text == '친구목록보기'){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>list.style.display = 'block';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.text = '친구목록감추기';</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>list.style.display = 'none';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.text = '친구목록보기';</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}</p><p>}</p><p></script></p><p> </p><p><hr /></p><p><h4>이미지변경</h4></p><p> </p><p><a href="javascript:;" onclick="change();" id="btn2" data-status="0"></p><p><img src="<a href="<a href="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" target="_blank" rel="noopener noreferrer">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png</a>"><a href="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" target="_blank" rel="noopener noreferrer">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png</a></a>" /></p><p><img src="<a href="<a href="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" target="_blank" rel="noopener noreferrer">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png</a>"><a href="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" target="_blank" rel="noopener noreferrer">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png</a></a>" style="display:none" /></p><p></a></p><p><div id="list2" style="display:none;border:1px solid #99CCFF; padding:9px;"></p><p>친구1
</p><p>친구2
</p><p> </p><p></div></p><p> </p><p><script></p><p>function change(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>var button = document.getElementById('btn2');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>var list = document.getElementById('list2');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>if(button.attributes['data-status'].value == 0){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>list.style.display = 'block';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.attributes['data-status'].value = 1;</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.children[0].style.display = 'none';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.children[1].style.display = 'block';</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>list.style.display = 'none';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.attributes['data-status'].value = 0;</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.children[0].style.display = 'block';</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>button.children[1].style.display = 'none';</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}</p><p>}</p><p></script></p><p>

 

 

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

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

초이스2010

너무 감사합니다.

나머지는 제 숙제가 되겠네요..~~ 

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

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

초이스2010

감사 합니다.

위 소스로 활용하니 잘 동작은 됩니다.

소스를 메인에 호출해서 사용하려고 하는데 하위 목록이 많으면 특정 테이블안에 에 버튼을 위치 시키고 클릭하면 테이블이 확장 되어 버립니다.

테이블에 영향을 주지 않고 상단에 떠서 div만 펼져지게 보이도록 할 수 있도록 하려면 어찌 해야 하는지요?

 <script>
function change(){
    var button = document.getElementById('btn2');
    var list = document.getElementById('list2');
    if(button.attributes['data-status'].value == 0){ 
        list.style.display = 'block';
        button.attributes['data-status'].value = 1;
        button.children[0].style.display = 'none';
        button.children[1].style.display = 'block';
    }else{
        list.style.display = 'none';
        button.attributes['data-status'].value = 0;
        button.children[0].style.display = 'block';
        button.children[1].style.display = 'none';
    }
}
</script>

<table border="1"><!-- 호출 파일이 들어갈 테이블 (메인 페이지에 들어갈 자리)-->
 <tr>
        <td><!-- 여기서부터--><a href="javascript:;" onclick="change();" id="btn2" data-status="0">
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
   </a>
   <div id="list2" style="display:none;border:1px solid #99CCFF; padding:9px;">
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" /><br>
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png">https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" /> <!-- 여기까지 호출 파일-->
  </td>
 </tr>
</table>
</div>

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

답변에 대한 댓글 1개

�
깜봉
9년 전
버튼 영역을 고정 하시겠다면 고정영역과 변화가 있는 영역을 분리하셔야합니다

td 안의 내용을 분리 하였습니다.

그리고 테이블이 확장되지 않게 하고 싶다는 말씀 같은데.... 사이즈를 미리 정의 하셔서 고정하시고, 보여지는 내용에 스크롤을 추가 하시면 되겠습니다.


<style>
.test-table{width:970px;height:360px;}
.test-table th{height:180px;text-align:left}
.test-table td{height:198px;text-align:left}
.test-table #list2{overflow:auto;height:174px}
</style>

<script>
function change(){
var button = document.getElementById('btn2');
var list = document.getElementById('list2');
if(button.attributes['data-status'].value == 0){
list.style.display = 'block';
button.attributes['data-status'].value = 1;
button.children[0].style.display = 'none';
button.children[1].style.display = 'block';
}else{
list.style.display = 'none';
button.attributes['data-status'].value = 0;
button.children[0].style.display = 'block';
button.children[1].style.display = 'none';
}
}
</script>
<table border="1" class="test-table"><!-- 호출 파일이 들어갈 테이블 (메인 페이지에 들어갈 자리)-->
<tr>
<th>
<!-- 고정영역-->
<a href="javascript:;" onclick="change();" id="btn2" data-status="0">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
</a>
</th>
</tr>
<tr>
<td>
<div id="list2" style="display:none;border:1px solid #99CCFF; padding:9px;">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" /><br>
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/approved-151676__180.png" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" />
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/17/00/remove-151678__180.png" style="display:none" /> <!-- 여기까지 호출 파일-->
</td>
</tr>
</table>
</div>

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

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

로그인