내가있는 테이블을 ".. 연수 보험"제목의 측면에 서면 나는 사람들이 더보고 클릭 할 수 있도록하려면버튼/텍스트를 클릭 할 때 정보를 공개하는 방법은 무엇입니까?
'을 더 볼'다음 정보는 제목 아래에 표시
방법 나는 이것을합니까?
감사합니다.
제임스
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
</table>
다른 방법이있을 수 있습니다를 - 비 자바 스크립트 방식 -하지만 항상 JavaScript를 사용하여이 작업을 수행했습니다.당신이 발견 한 것처럼
이<script type="text/javascript">
function show_more (element_to_show) {
var element_to_show = getRefToDiv(element_to_show);
element_to_show.style.display = "inline";
}
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>,
</tr>
</table>
안녕하세요! 도움을 많이 주셔서 감사합니다! – James
코드를 입력했는데 더 이상 클릭 할 수없는 것을 볼 수 있습니까? – James
@ 제임스 - 죄송합니다. 먼저 브라우저에서 JavaScript가 활성화되어 있는지 확인하십시오. 또한 페이지의
섹션에내가/보여 jQuery를 사용하는 것이이 때마다 텍스트의 블록 숨기기 "추가 참조를 ..."을 클릭합니다. 물론
, 이것은 이미 jQuery로 익숙한 가정합니다. 그렇지 않은 경우 또는 사용하지 않을 경우 빠른 Google 검색이 표시됩니다. http://www.cssnewbie.com/showhide-content-css-javascript/
display = none; onclick 이벤트에서 스타일을 제거합니다.
다음 중 하나가 필요합니다. '자세히보기'를 클릭하면 숨겨진 DIV가 표시됩니다. Javascript 또는 JQuery가 필요합니다. 또는 테이블에 다른 행을 생성하는 PHP가 있어야합니다.
별도의 파일에서 데이터를로드하려면 AJAX를 사용해야합니다. '자세히보기'를 클릭하면 이미 페이지에있는 요소를 표시하려면 일반 자바 스크립트를 사용할 수 있습니다. 표에 새 행을 추가하고 ID를 부여하고 인라인 스타일을 사용하여 숨 깁니다. 그런 다음 "더보기"텍스트 주위에 링크를 추가하고 숨겨진 행을 표시하는 onclick 핸들러를 제공하십시오. 이와 같이 :
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
<td align="right"><font face="lucidagrande" size="2" color="red"><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;">See More...</a></font></td>
</tr>
<tr id="showme" style="display: none">
<td colspan="2">More info appears here!!!</td>
</tr>
</table>
당신은 1990 년대 HTML의 나쁜 경우가 있습니다.
여기를 할 수있는 1990 년대의 방법이있다 :
<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
<a href="javascript://" onclick="showThis('a1')">See More...</a>
JS :
function showThis(id) {
document.getElementById(id).style.display='block'
}
몇 가지 팁 :
:
에 ID를 부여하여 버튼을 표시 할 내용 '더보기'
$('#see_more').click(function() { $('#more_content').show(); });
<script language="javascript">
$(document).ready(function(){
$('#see_more').click(function(){
$("#more_text").show();
});
$("#more_text").hide();
});
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" id="see_more">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
<tr><td id="more_text">This is more text here......</td></tr>
</table>
, 달성하기 위해 여러 가지 방법이 있습니다 :
display:inline스타일이 같은 (테스트되지 않은)을 가지도록more요소를 설정, 그 핸들러에서 "see more"TD에onclick처리기를 추가하고 이. 가장 최신 기술에 관심이 있다면 아마도 DOM (문서 객체 모델)이 어떻게 작동하는지 잘 알고 싶어 할 것이고 jQuery (http://jquery.com/)라는 자바 스크립트 라이브러리를 체크 아웃하고 싶을 것이다. 이러한 기술에 대한 기본 지식조차도 매우 적은 코드로 정말 멋진 작업을 수행 할 수 있습니다. –HTML을 21 세기 표준으로 업데이트하면 전반적인 HTML 개발 경험을 향상시키는 데 도움이됩니다. 'font' 태그는 HTML의'color','face','align' 속성과 함께 사용되지 않습니다. 테이블 레이아웃도 일반적으로 눈살을 찌푸리게됩니다. Dan Cederholm의 Bulletproof Web Design *을 선택하는 것이 좋습니다. – Shauna