태그 중첩을 해결하는 방법

실제 웹페이지 레이아웃에서는 때로는 전체 클릭 영역 중앙에 있는 버튼의 일부를 클릭해야 하는 경우가 있는데, 그러면 A 태그가 A 태그에 중첩됩니다

outerA innerA

그러나 우리는 이것을 발견할 것입니다 중첩된 경우 브라우저는 이를 잘못 구문 분석하며 구문 분석 결과는 다음과 같습니다.

outerA innerA

그렇다면 이 상황을 어떻게 해결해야 할까요?

옵션 1: 중첩을 위해 개체 태그를 사용하세요

예를 들어 다음과 같이 작성하면 구문 분석에 오류가 발생하지 않습니다!

outerA innerA 로그인 후 복사 이 글쓰기 방법의 가장 대표적인 적용은 목록 전체를 클릭해야 하고, 목록에 전화번호가 별도로 클릭되어야 한다는 것입니다!

列表内容 拨打电话 로그인 후 복사 옵션 2: 위치 지정 방법 사용

이 방법은 중첩할 필요가 없다는 아이디어입니다. 직접 코드는 다음과 같이 작성됩니다.

outerA innerA 로그인 후 복사 외부 하오룸은 display :inline-block 및 absolute positioning 을 설정하여 내부 a 태그 위치에 배치됩니다. 그런 다음 마우스가 a 레이블을 올바르게 선택할 수 있도록 내부 a 레이블과 외부 a의 z-index 크기를 조정합니다.

이 방법의 핵심 아이디어는 우리가 달성하려는 효과를 시뮬레이션하고 달성하는 것입니다. 포지셔닝을 통해!

옵션 3: HTML의 태그를 사용하여

학교 웹 페이지를 만들 때 Dreamweaver를 사용하면 pictures 핫 존을 사용하여 사진의 클릭 효과를 얻을 수 있습니다. 그렇습니다. 핫존을 사용하여 태그의 중첩 효과를 얻을 수 있습니다!

area 태그는 오랫동안 사용되지 않았습니다. 기본 지식을 대중화하겠습니다.

area는 모양과 좌표를 지정할 수 있습니다.

모양 property 가 "직사각형"으로 설정된 경우 이 값은 직사각형의 왼쪽 위 모서리와 오른쪽 아래 모서리의 좌표를 지정합니다. (x1,y1,x2,y2)

shape 속성이 "circ"로 설정된 경우 이 값은 원 중심의 좌표와 반경을 지정합니다. (x,y,radius)

shape 속성이 "poly"로 설정된 경우 이 값은 다각형의 각 꼭지점 값을 지정합니다. 첫 번째 좌표와 마지막 좌표가 일치하지 않는 경우 다각형을 닫으려면 브라우저가 마지막 좌표 쌍을 추가해야 합니다. (x1,y1,x2,y2,..,xn,yn)

지역과 지도는 함께 사용해야 합니다. 사진에서 일부 핫 영역을 지정하거나 목록에서 핫 영역을 지정할 수 있습니다.

영역과 지도를 사용하여 목록의 a 태그 내부에 핫 영역을 지정하면 위의 태그를 중첩한 것과 유사한 효과를 얻을 수 있습니다!

위의 예에서도 다음과 같이 작성할 수 있습니다.

outerA 로그인 후 복사 옵션 4: a 태그를 대체하기 위해 a 태그와 다른 태그 및 js 이벤트를 사용합니다.

물론 a 태그를 대체하기 위해 a 태그를 대체할 수도 있습니다. 하지만 우리는 코드를 뛰어넘는 js를 더 많이 작성해야 하고 a 태그가 얻을 수 있는 효과를 얻기 위해 js를 사용해야 합니다!

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

태그 중첩을 해결하는 방법