Comment résoudre une imbrication de balises

Nous savons que dans la mise en page réelle de la page Web, il est parfois nécessaire de cliquer sur une partie du bouton au milieu de toute la zone de clic, puis la balise A est imbriquée dans la balise A

< ;! -- Lorsqu'une balise est imbriquée-->6f4f7058e7805f3bde7858b4ff993cebouterA 0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

Mais nous constaterons que pour ce type d'imbrication, le navigateur l'analysera directement de manière incorrecte, et le résultat de l'analyse est le suivant :

7a983fd9853f4f867148eeaa490b64d5
6f4f7058e7805f3bde7858b4ff993cebouterA5db79b134e9f6b82c0b36e0489ee08ed
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

Alors pour cette situation, comment la résoudre ?

Option 1 : Utiliser des balises d'objet pour l'imbrication

Par exemple, si nous écrivons comme suit, il n'y aura aucune erreur d'analyse !

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

L'application la plus typique de cette méthode d'écriture est qu'il faut cliquer sur toute la liste, et il y a des numéros de téléphone dans la liste sur lesquels il faut cliquer individuellement pour composer !

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

Option 2 : Utiliser la méthode de positionnement

Cette méthode est un dernier recours. L'idée est que nous n'avons pas besoin d'imbriquer. Le code direct s'écrit comme suit :

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

Les salles extérieures sont placées dans la balise intérieure en définissant affichage:inline-block et positionnement absolu emplacement . Ajustez ensuite la taille du z-index de l'étiquette interne a et de l'externe a afin que la souris puisse sélectionner correctement l'étiquette a

L'idée principale de cette méthode est de simuler ; notre mise en œuvre par le positionnement L'effet que vous souhaitez obtenir !

Option 3 : utilisez la balise HTML 03fc64e1e502d5ba947b3a9af06d2d2adab9f699790ab0922e596ecb9f6677d5 pour implémenter

N'oubliez pas que lorsque vous créez la page Web de l'école, vous utilisez Dreamweaver, vous pouvez utiliser Dreamweaver Image zone chaude pour obtenir l'effet clic de l'image. C'est vrai, nous pouvons utiliser des zones chaudes pour obtenir l'effet d'imbrication d'un tag !

La balise Area n'a pas été utilisée depuis longtemps. Vulgarisons les connaissances de base :

La zone peut spécifier la forme et les coordonnées.

Si l'attribut shape est défini sur "rect", alors cette valeur spécifie les coordonnées des coins supérieur gauche et inférieur droit du rectangle. (x1,y1,x2,y2)

Si l'attribut de forme est défini sur "circ", cette valeur spécifie les coordonnées et le rayon du centre du cercle. (x,y,radius)

Si l'attribut de forme est défini sur "poly", cette valeur spécifie la valeur de chaque sommet du polygone. Si les première et dernière coordonnées ne correspondent pas, alors pour fermer le polygone, le navigateur doit ajouter la dernière paire de coordonnées. (x1,y1,x2,y2,..,xn,yn)

la zone et la carte doivent être utilisées ensemble. Vous pouvez spécifier certaines zones chaudes sur l'image ou spécifier les zones chaudes dans la liste.

Si nous utilisons Area et Map pour spécifier la zone chaude à l'intérieur de la balise a dans la liste, nous pouvons obtenir un effet similaire à l'imbrication de la balise a ci-dessus !

Toujours l'exemple ci-dessus, on peut écrire comme suit :

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

Option 4 : Utiliser span et d'autres balises ainsi que des événements js pour remplacer la balise a

Bien sûr nous pouvons également utiliser span, tags, etc. pour remplacer la balise a, mais vous devez écrire plus de code de saut js pour obtenir l'effet que la balise a peut obtenir via js !

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment convertir l'encodage CSS

Comment utiliser CSS3 pour créer lumières Animation de texte d'affichage d'éclairage

Comment créer des effets spéciaux de chargement CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!