이 가이드에서는 CSS와 JavaScript를 사용하여 탭을 만드는 방법을 설명합니다.
CSS와 JavaScript로 탭을 만드는 방법은 무엇입니까?
이 섹션에서는 CSS 및 JavaScript를 사용하여 탭을 만드는 방법에 대한 단계별 지침을 수행합니다.
1단계: HTML을 사용하여 탭 구조 만들기
먼저 HTML 탭 구조를 생성하는 HTML 코드를 살펴보세요.
< 사업부 ID = '탭1' 클릭하면 = '첫 번째()' > 집 div >
< 사업부 ID = '탭2' 클릭하면 = '두번째();' > 에 대한 div >
< 사업부 ID = '탭3' 클릭하면 = '제삼();' > 문의하기 div >
< br />
< 사업부 ID = '계속1' > 리눅스힌트에 오신 것을 환영합니다 ! div >
< 사업부 ID = '계속2' > 기술교육
우리는 Linux, 프로그래밍, 컴퓨터 과학 등에 대해 배우는 데 도움이 되는 많은 제품을 구축했습니다.
div >
< 사업부 ID = '계속3' >
편집자 AT linuxhint DOT com으로 우리 팀에 문의하실 수 있습니다.
div >
위의 코드 줄에서:
- “ ” 태그는 ID가 “tab1”이고 “가 첨부된 div 요소를 추가합니다. 클릭하면 ” 연결된 “을 실행하는 이벤트 첫 번째() '를 클릭하면 기능이 실행됩니다. 이 요소는 HTML 탭 역할을 합니다.
- 위의 방법은 다음 두 div 요소에 대해 수행됩니다.
- “
” 태그는 줄 바꿈을 추가합니다.- “
” 태그는 할당된 ID “cont1”을 갖는 div 요소를 다시 삽입합니다. 이 요소는 블록에 생성된 탭의 내용을 표시합니다.- 앞으로 2개'
” 태그는 할당된 ID와 함께 div 요소도 추가합니다.
2단계: CSS를 사용하여 탭 스타일 지정이제 CSS 스타일 속성을 적용하여 원하는 대로 탭과 해당 콘텐츠를 맞춤설정하세요.
< 스타일 >
#탭1, #탭2, #탭3 {
뜨다 : 왼쪽 ;
심 : 5픽셀 10픽셀 5픽셀 10픽셀 ;
배경 : 오렌지 레드 ;
색상 : #FFFFFF ;
여유 : 0픽셀 5픽셀 0픽셀 5픽셀 ;
커서 : 바늘 ;
국경 - 반지름 : 3px ;
}
#탭1 : 호버, #tab2 : 호버, #tab3 : 호버링 {
배경 : 녹색 ;
}
#연속1, #연속2, #연속3 {
너비 : 300px ;
키 : 100px ;
심 : 40px ;
폰트 - 크기 : 중간 ;
폰트 - 가족 : '타임즈 뉴 로만' , 타임즈, 세리프 ;
국경 : 2px 단색 주황색 빨간색 ;
국경 - 반지름 : 7px ;
표시하다 : 없음 ;
}
스타일 >명시된 코드 조각에서:
- 먼저 ' 탭 ” 할당된 ID를 사용하고 다음 스타일 속성(부동, 패딩, 배경, 색상, 여백: 0px 5px 0px 5px, 커서 및 테두리 반경)을 통해 사용자 정의합니다.
- 다음으로 “ 호버링 ” 이벤트 핸들러에 탭이 있으면 사용자 마우스가 탭 위에 있을 때 배경색이 변경됩니다.
- 그 후 ' 탭 내용 '는 ID가 'cont1', 'cont2' 및 'cont3'인 div 요소에 저장됩니다. 이제 다음 스타일 속성(너비, 높이, 패딩, 글꼴 크기, 글꼴 모음, 테두리, 테두리 반경 및 표시)을 적용합니다.
3단계: JavaScript를 사용하여 탭에 기능 추가마지막으로 JavaScript를 사용하여 생성된 탭에 기능을 추가합니다.
< 스크립트 >
기능이 먼저다 ( ) {
문서. getElementById ( '계속1' ) . 스타일 . 표시하다 = '차단하다' ;
문서. getElementById ( '계속2' ) . 스타일 . 표시하다 = '없음' ;
문서. getElementById ( '계속3' ) . 스타일 . 표시하다 = '없음' ;
}
기능 두 번째 ( ) {
문서. getElementById ( '계속2' ) . 스타일 . 표시하다 = '차단하다' ;
문서. getElementById ( '계속1' ) . 스타일 . 표시하다 = '없음' ;
문서. getElementById ( '계속3' ) . 스타일 . 표시하다 = '없음' ;
}
세 번째 기능 ( ) {
문서. getElementById ( '계속3' ) . 스타일 . 표시하다 = '차단하다' ;
문서. getElementById ( '계속1' ) . 스타일 . 표시하다 = '없음' ;
문서. getElementById ( '계속2' ) . 스타일 . 표시하다 = '없음'
}
스크립트 >위의 코드 줄은 다음과 같습니다.
- '라는 이름의 함수를 정의합니다. 첫 번째 '.
- 이 함수 정의에서 “ document.getElementById() ' 메소드는 ID가 'cont1'인 div 요소에 액세스하고 ' 스타일 ” 속성이 “ 차단하다 ” 그것에 가치를 두세요. 이 속성은 사용자가 클릭하는 탭의 내용을 표시합니다.
- 다음으로 'document.getElementById()'는 다른 div에 액세스하고 'none' 값을 갖는 'style' 속성을 적용하여 숨깁니다. 웹페이지에서 해당 요소를 숨깁니다.
- 위의 방법은 다음에 액세스되는 div 요소에 대해 수행됩니다. 이는 “first” 기능이 “style” 속성 값이 “block”인 탭의 내용만 표시하고 나머지는 숨기기 때문입니다.
- 위의 과정은 다음 “second()”와 “third()” 함수에 대해 수행됩니다.
산출
탭이 성공적으로 생성되고 사용자 클릭 시 해당 내용이 표시되는 것을 볼 수 있습니다.
결론
탭을 만들려면 먼저 'HTML'을 사용하여 구조를 구축한 다음 CSS 스타일 속성을 사용하여 사용자 정의하세요. 추가 스타일 시트를 내보내지 않고 스타일 속성이 추가됩니다. 이러한 속성은 탭을 매력적이고 눈길을 사로잡습니다. 탭이 생성되고 사용자 정의되면 JavaScript 프로그래밍 언어를 사용하여 탭에 기능을 추가합니다. 이 가이드는 CSS와 JavaScript를 사용하여 탭을 만드는 전체 절차를 실제로 설명했습니다.