HTML의 중첩 링크: 허용 여부?

링크 중첩: 허용 또는 금지?

웹 개발에서 일반적인 질문이 발생합니다. 다른 링크 내에 링크를 중첩하는 것이 허용됩니까? ?

W3C HTML4 Stance

W3C HTML4 지침에 따르면 중첩 링크는 금지되어 있습니다. A 요소는 다른 A 요소를 포함할 수 없습니다.

HTML5의 관점

HTML5에서는 규칙이 약간 발전했습니다. 링크 중첩은 여전히 ​​허용되지 않지만 새로운 제약 조건이 있습니다. 즉, 앵커 태그(A 요소)를 포함하는 대화형 콘텐츠를 A 요소 내에 배치할 수 없습니다.

모범 사례

이러한 제한에도 불구하고 특정 레이아웃에는 여러 개의 클릭 가능한 영역을 포함하는 클릭 가능한 영역이 필요할 수 있습니다. 요소.

대체 접근 방식

• CSS 사용: 클릭 가능한 영역을 상위 요소에 할당하고 CSS를 사용하여 적절한 링크 스타일을 지정합니다. 동작.
• JavaScript 사용: 이벤트 사용 클릭을 캡처하고 대상 요소를 기반으로 의도한 작업을 결정하는 핸들러.

예

주어진 코드 조각을 고려하세요.

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

회색 막대 전체를 클릭 가능하게 만들려면 클릭 이벤트 핸들러를 상위 요소를 선택하고 다음과 같이 jQuery를 사용하세요.

$('.sp_mngt_bar').click(function(e) {
  if (e.target.className.indexOf('sp_mngt_move') > -1) {
    // Handle move icon click
  } else if (e.target.className.indexOf('sp_mngt_settings') > -1) {
    // Handle settings icon click
  } else {
    // Handle main link click
  }
});

위 내용은 HTML의 중첩 링크: 허용 여부?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!