1 <! DOCTYPE html로 > 2 < HTML은 LANG = "zh"로 설정 > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" /> 5 < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0 " /> 6 < 메타 HTTP-당량 ="X-UA 호환 " 콘텐츠 ="즉 에지 = " /> 7 < 타이틀 > 문헌 </ 타이틀 > 9 * { 10 마진 : 0 ; 11 패딩 : 0 ; 12 박스 크기 : 경계 상자 ; 13 } 14 리튬 { 15 목록 스타일 타입 : 없음 16 } 17 { 18 문자 장식 : 없음 ; (19) 색 : 111 20 } 21 .box { 22 위치 : 상대 ; (23) 의 폭 : 400 픽셀 ; 24 높이 : 500 픽셀 ; 25 마진 : 10px 자동 ; (26) 배경색 : #ccc ; 27 } 28 .nav { 29 높이 : 50 픽셀 ; (30) 의 폭 : 400 픽셀 ; (31) 표시 : 플렉스 ; (32) 플렉스 방향 : 행 ; 33 정당화-내용 : 공간의 주위에 ; 34 정렬 - 아이템 : 센터 ; 35 } 36 .content { 37 폭 : 400 픽셀 ; 38 높이 : 450 픽셀 ; 39 국경 정상 : 2 픽셀 고체 #fff ; 40 } 41 .content1, .content2, .content3, .content4 { 42 표시 :없음 ; 43 단어 휴식 : 단어 휴식 ; (44) 바꿈 : 단어 휴식 ; 45 } 46 .content1 : 타겟 .content2 : 타겟 .content3 : 타겟 .content4 : 타겟 { 47 표시 : 블록 ; 48 } 49 </ 스타일 > 50 </ 헤드 > 51 < 본문 > 52 < DIV 클래스 = "박스" > 53 < UL 클래스= "탐색" > 54 < 리 > < HREF = "#의 콘텐츠 1" > 11 </ > </ 리 > 55 < 리 > < HREF = "#의 content2" > 22 </ > </ 리 > 56 < 리 > < HREF = "#의 content3" > 33 </ > </ 리 > 57 < 리 > < HREF = "#의 content4 " > 44 </ > </ 리 > 58 </ UL > 59 < DIV 클래스 = "콘텐츠" > 60 < DIV 클래스 = "콘텐츠 1" ID = "콘텐츠 1" > 61 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 62 </ DIV > 63 < DIV 클래스 = "content2" ID = "content2" > 64 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 65 </ DIV > 66 < DIV 클래스 = "content3" ID = "content3" > 67 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 68 </ DIV > 69 < DIV 클래스 = "content4" ID = "content4" > 70 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 71 </ DIV > 72 </ DIV > 73 </ DIV > 74 75 < 스크립트 타입 = "텍스트 / 자바 스크립트" > 76 document.location.href = " #의 콘텐츠 1 " // 개시시에 표시 할 내용 (77) </ 스크립트 > 78 </ 바디 > 79 </ HTML >
코드로
CSS3 실현 탭 표시 줄은 레이블 속성 대상의 주요 사용을 전환
JS 코드 만 가지고 간
document.location.href = "#의 콘텐츠 1";
당신이 문구의 내용을 작성하지 않는 경우 공백을 시작 컨텐츠 영역입니다