HTML에서 텍스트를 펼치거나 접는 방법

HTML 5는 풍부한 양방향 웹 사이트를 제공하지만, 현재 브라우저는 기능 구현이 다양하며 많은 기업에서는 새로운 표준과 호환되는 브라우저를 아직 배포하지 않았습니다. 그렇더라도 풍부한 상호 작용이 현재 브라우저에서 구현 될 수 있습니다. JavaScript 사용 경험이 적은 사용자는 div 태그의 innerHTML 속성을 사용하여 윤곽선을 확장 및 축소하고 대화 형 도움말을 사이트에 추가하십시오.

새 프로젝트 만들기

자주 사용하는 웹 개발 도구를 열고 새 웹 사이트를 만드십시오. Microsoft의 Visual Studio 도구는 WebDev 버전을 무료로 다운로드 할 수 있고 여기에는 기본 제공 웹 서버가 포함되어 있으므로 여기에서 사용됩니다.

새 HTML 페이지 만들기

새 페이지 default.htm을 만듭니다. "프로젝트", "항목 추가"를 클릭 한 다음 "HTML 페이지"를 선택하고 이름을 default.htm으로 지정하십시오. default.aspx 파일이 이미 있으면 삭제하십시오. HTML 또는 마크 업보기로 전환하고 태그 뒤에 다음 코드를 추가하십시오.

샘플 페이지

1 ? 제목 1

2? 제목 2

h3 태그는 "샘플 페이지"라는 제목의 페이지 머리글과 그 다음에 윤곽선 두 개를 만듭니다. 각 줄은 숫자, 물음표 및 제목으로 시작합니다. 물음표는 anchor ((태그를 클릭 할 수있는 링크로 변환하는 태그)로 둘러 쌓여 있습니다. 각 제목 다음에 추가 텍스트를 삽입 할 수있는 빈 div 태그를 추가했습니다.

자바 스크립트 추가

다음과 같이 각 물음표 링크에서 활성화 할 수있는 JavaScript 함수를 추가하십시오.

각 링크는 JavaScript 함수 help_click을 호출하고 div 태그 이름과 일부 추가 텍스트를 전달합니다. 이 함수는 먼저 div 태그가 비어 있는지 확인합니다 (div.innerHTML == ""). 태그가 비어 있으면 코드가 줄 바꿈을 추가합니다 (

), 텍스트 뒤에 3 개의 공백 문자 ()가 있습니다. div에 이미 텍스트가 포함되어 있으면 div 태그 내의 마크 업이 지워집니다.

새 페이지 테스트

코드를 테스트하십시오. Visual Studio의 경우 "F5"키를 클릭하십시오. 페이지가 나타나면 물음표 중 하나를 클릭하십시오. 처음 1 행의 링크를 클릭하면 개요가 확장되어 "제목 1의 추가 텍스트"텍스트가 포함됩니다. 두 번째로 링크가 클릭되면 텍스트가 사라집니다. 약간의 창의적인 코드를 사용하면이 같은 기술을 사용하여 트리보기, 복잡한 외곽선을 작성하거나 도움말 텍스트를 표시하거나 숨길 수 있습니다.