Início / coding / Perguntas / 79108412
Accepted
Valentin Vignal
Asked: 2024-10-21 10:39:16 +0800 CST

Como aninhar <a> dentro de <a>? [duplicado]

  • 772

Estou usando o Svelte 5.

<a href="my-first-link">
    <div>
        <!-- Some elements -->
    </div>
    <a href="my-second-link">
        <div>
            <!-- Some other elements -->
        </div>
    </a>
    <div>
        <!-- Some elements -->
    </div>
</a>

Svelte está apresentando um erro de lint:

`<a>` is invalid inside `<a>`svelte(node_invalid_placement)

O que é esperado nessa situação para corrigir esse problema?

html

2 respostas

  1. Best Answer

    Isso é esperado. Você não pode ter conteúdo interativo dentro de uma <a>tag. Como <a>as tags são elementos interativos em si, você não pode aninhá-las. Você terá que redesenhar sua marcação para levar isso em conta.

    https://html.spec.whatwg.org/#interactive-content

    • 5

  2. Não é possível empilhar elementos dentro uns dos outros diretamente no Svelte. Você deve reorganizar sua estrutura para que cada link seja independente para corrigir o erro de lint. Este é um método de refatoração de código:

    <a href="my-first-link">
    <div>
        <!-- Some elements -->
    </div>
</a>
<a href="my-second-link">
    <div>
        <!-- Some other elements -->
    </div>
</a>
<div>
    <!-- Some elements -->
</div>

    Para evitar o aninhamento inválido, mova a segunda tag para fora da primeira. Agora, cada link pode funcionar independentemente.

    • 1

relate perguntas