タグのネストを解決する方法

実際の Web ページのレイアウトでは、クリック領域全体の中央にあるボタンの一部をクリックする必要がある場合があり、その場合、A タグが A タグ内にネストされます

outerA innerA

しかし、これはネストされている場合、ブラウザはこれを誤って直接解析し、解析結果は次のようになります:

outerA innerA

では、この状況を解決するにはどうすればよいでしょうか?

オプション 1: ネストにオブジェクト タグを使用する

たとえば、次のように記述すると、解析でエラーは発生しません。

outerA innerA ログイン後にコピー この書き方の最も一般的な用途は、リスト全体をクリックする必要があり、リスト内に個別にクリックする必要がある電話番号があることです。

列表内容 拨打电话 ログイン後にコピー オプション 2: 位置決めメソッドを使用する

この方法は、ネストする必要がないという考えです。直接コードは次のように記述されます:

outerA innerA ログイン後にコピー display :inline-block と absolute Positioning を設定することにより、外側の haoroom は内側の a タグの位置に配置されます。次に、マウスが a ラベルを正しく選択できるように、内側の a ラベルと外側の a の z-index サイズを調整します。このメソッドの中心的な考え方は、達成したい効果をシミュレートして達成することです。ポジショニングを通じて！

オプション 3: HTML の タグを使用して

学校の Web ページを作成するときは、必ず Dreamweaver を使用して、画像のクリック効果を実現します。そうです、ホット ゾーンを使用してタグのネスト効果を実現できます。

area タグは長い間使用されていませんでしたが、 area は形状と座標を指定できます。

形状

プロパティ が「rect」に設定されている場合、この値は長方形の左上隅と右下隅の座標を指定します。 (x1,y1,x2,y2)

shape 属性が "circ" に設定されている場合、この値は円の中心の座標と半径を指定します。 (x,y,radius) shape 属性が「poly」に設定されている場合、この値はポリゴンの各頂点の値を指定します。最初と最後の座標が一致しない場合、多角形を閉じるために、ブラウザは最後の座標のペアを追加する必要があります。 (x1,y1,x2,y2,..,xn,yn)

エリアとマップを併用する必要があります。画像上でホット エリアを指定することも、リストでホット エリアを指定することもできます。

エリアとマップを使用してリスト内の a タグ内のホットエリアを指定すると、上記の a タグのネストと同様の効果を実現できます。

上記の例でも、次のように書くことができます:

outerA ログイン後にコピー オプション 4:span および他のタグと js イベントを使用して a タグを置き換えます

もちろん、span やタグなどを使用して a を置き換えることもできます。タグはありますが、さらに js を記述する必要があります。コードをジャンプし、js を使用して a タグが達成できる効果を実現します。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

タグのネストを解決する方法