So lösen Sie eine Tag-Verschachtelung

Wir wissen, dass es im tatsächlichen Webseitenlayout manchmal notwendig ist, auf einen Teil der Schaltfläche in der Mitte des gesamten Klickbereichs zu klicken, dann wird das A-Tag im A-Tag verschachtelt

< ;! -- Wenn ein Tag verschachtelt ist-->6f4f7058e7805f3bde7858b4ff993cebouterA 0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

Aber wir werden feststellen, dass der Browser diese Art der Verschachtelung direkt falsch analysiert und das Analyseergebnis wie folgt lautet:

2e7ac6b94f14d43fbbf27d9d084c27f1
6f4f7058e7805f3bde7858b4ff993cebouterA5db79b134e9f6b82c0b36e0489ee08ed
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

Wie kann man diese Situation lösen?

Option 1: Objekt-Tags zum Verschachteln verwenden

Wenn wir beispielsweise wie folgt schreiben, tritt beim Parsen kein Fehler auf!

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

Die typischste Anwendung dieser Schreibmethode besteht darin, dass auf die gesamte Liste geklickt werden muss und es Telefonnummern in der Liste gibt, die zum Wählen einzeln angeklickt werden müssen!

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

Option 2: Positionierungsmethode verwenden

Diese Methode ist der letzte Ausweg. Die Idee ist, dass wir keine Verschachtelung benötigen. Der direkte Code ist wie folgt geschrieben:

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

Die äußeren Haorooms werden im inneren Tag platziert, indem display:inline-block und absolute Positionierung location festgelegt werden . Passen Sie dann die Größe des z-Index der inneren a-Beschriftung und der äußeren a-Beschriftung an, damit die Maus die a-Beschriftung korrekt auswählen kann

Die Kernidee dieser Methode ist die Simulation Unsere Umsetzung durch Positionierung Die Wirkung, die Sie erzielen möchten!

Option 3: Verwenden Sie das HTML-Tag 03fc64e1e502d5ba947b3a9af06d2d2adab9f699790ab0922e596ecb9f6677d5 zur Implementierung

Denken Sie daran, dass Sie bei der Erstellung der Schulwebseite Dreamweaver verwenden können Bild Hot Zone, um den Klickeffekt des Bildes zu erzielen. Richtig, wir können Hot Zones verwenden, um den Verschachtelungseffekt eines Tags zu erzielen!

Das Area-Tag wird schon lange nicht mehr verwendet. Machen wir das Grundwissen bekannt:

Area kann Form und Koordinaten angeben.

Wenn das Form--Attribut auf „rect“ gesetzt ist, gibt dieser Wert die Koordinaten der oberen linken und unteren rechten Ecke des Rechtecks ​​an. (x1,y1,x2,y2)

Wenn das Formattribut auf „circ“ gesetzt ist, gibt dieser Wert die Koordinaten und den Radius des Kreismittelpunkts an. (x,y,radius)

Wenn das Formattribut auf „Poly“ gesetzt ist, gibt dieser Wert den Wert jedes Scheitelpunkts des Polygons an. Wenn die ersten und letzten Koordinaten nicht übereinstimmen, muss der Browser zum Schließen des Polygons das letzte Koordinatenpaar hinzufügen. (x1,y1,x2,y2,..,xn,yn)

Bereich und Karte sollten zusammen verwendet werden. Sie können einige heiße Bereiche auf dem Bild angeben oder die heißen Bereiche in der Liste angeben.

Wenn wir „area“ und „map“ verwenden, um den Hot-Bereich innerhalb des „a“-Tags in der Liste anzugeben, können wir einen ähnlichen Effekt wie bei der Verschachtelung des „a“-Tags oben erzielen!

Als obiges Beispiel können wir wie folgt schreiben:

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

Option 4: Verwenden Sie span und andere Tags plus js-Ereignisse, um das a-Tag zu ersetzen

Natürlich Wir können auch Span, Tags usw. verwenden, um das a-Tag zu ersetzen, aber Sie müssen mehr js-Sprungcode schreiben, um den Effekt zu erzielen, den das a-Tag durch js erzielen kann!

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie die CSS-Codierung

Wie Sie mit CSS3 erstellen Lichter Beleuchtung zeigt Textanimation an

So erstellen Sie CSS3-Lade-Spezialeffekte

Das obige ist der detaillierte Inhalt vonSo lösen Sie eine Tag-Verschachtelung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!