HTML에서 탭바를 구현하는 여러 방법
HTML에는 태그가 많이 사용됩니다. 이 글에서는 태그 막대의 여러 구현 방법을 권장합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.
탭 페이지: 카테고리 + 설명
탭 바: 카테고리=> 사용자가 현재 어디에 있고 어디로 가는지 알 수 있도록 합니다.
1. CSS 명명 방법:
XML/HTML 코드클립보드에 콘텐츠 복사
-
<p class="service-tabs service-tabs1">
-
<ul class="service-tabs-inner">
="on"> <a href="#nogo">Followa>li& gt; & gt;
< / li> <li><a href="#nogo" >내비게이션 a>
탭 장점: 1. 검색 용이 2. SEO 표준 준수-
2. 레이아웃 방법: 1.
2.
3. 템플릿 코드:1. 마우스 오버 시 배경색 추가
CSS Code클립보드에 콘텐츠 복사
.service-tabs li a{
너비: 160px;height:
80px;
:
displayblock
color
;:#666;font-size:
32px;}
.service-tabs1 li a:hover{color:#2CC185;}
:- ;}
/*배경*/
2. 작은 삼각형, 당연함
CSS 코드
클립보드에 콘텐츠 복사
.service-tabs4 li{position:
relative;}
- .service -tabs4 li a:hover{
color:#2CC185;}
- .service -tabs4 li.on a{
background-color:#2CC185;color
: #fff - ; }
.service-tabs4 li i{width:11px; height
: 7px - ;
position:absolute;bottombottom:-6px ;왼쪽 :76px; background:url(images/arrow.png) ;display 3. 밑줄 CSS Code콘텐츠를 클립보드에 복사
.service -tabs2 li a:hover{color:#2CC185;}
.service-tabs2 li.on a{
:
height78px
border-bottom;:
2px
solid#2CC185;color:#2CC185
;}- 4. 스크립트 구현
JavaScript 코드콘텐츠를 클립보드에 복사 $(
function (){ $(
).click(
() { $(
functionthis
"on").addClass() .siblings().removeClass(
"on"); }); })
은 간단하고 실용적이어서 누구나 배울 수 있습니다. 서둘러 손을 더럽히십시오.
관련 권장 사항:html img 태그 사용 방법
HTML5 새 태그html 일반적으로 사용되는 형식 표시 태그
위 내용은 HTML에서 탭바를 구현하는 여러 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O. 최고의 그래픽 설정3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션2 몇 주 전 By DDDR.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7480
15
Cakephp 튜토리얼
1377
52
Steam의 계정 이름 형식은 무엇입니까?
77
11
Win11 활성화 키 영구
51
19
NYT 연결 힌트와 답변
19
33
See all articles
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
li> <li>< a href="#nogo " >쇼핑a>
li> ul > p>
;
).addClass(
