태그 중첩을 해결하는 방법

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

32f7f67f31f036fa3473241c758234a06f4f7058e7805f3bde7858b4ff993cebouterA 0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

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

8e6a099bf39d8ca27376082297d8e147
6f4f7058e7805f3bde7858b4ff993cebouterA16ef26f8b7ea0fc89bdf90e275a93e5d
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

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

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

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

<a href="#haorooms">
    outerA    <object><a href="#haoroomsinner">innerA</a></object></a>

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

<a class="haorooms_list" href="跳转页面">
    列表内容    <object><a href="tel:694434565">拨打电话</a></object></a>

옵션 2: 위치 지정 방법 사용

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

<a href="#haorooms">outerA</a><a href="#haoroomsinner">innerA</a>

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

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

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

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

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

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

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

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

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

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

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

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

 <a href="#haorooms">
        outerA          <map>
            <area shape="rect" coords="0,0,200,21" href="haoroomsinner" >
        </map>
    </a>

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

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

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

관련 읽기:

CSS 인코딩을 변환하는 방법

CSS3을 사용하여 조명 디스플레이 텍스트 애니메이션을 만드는 방법

CSS3 로딩 특수 효과를 만드는 방법

위 내용은 태그 중첩을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!