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

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

b55d0ee50b82b5ce50e4f9cb4262abcc6f4f7058e7805f3bde7858b4ff993cebouterA 0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

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

56a1c15b08bf06ed91e484a247fbf723
6f4f7058e7805f3bde7858b4ff993cebouterA16ef26f8b7ea0fc89bdf90e275a93e5d
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

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

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

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

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

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

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

オプション 2: 位置決めメソッドを使用する

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

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

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

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

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

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

形状

プロパティ

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

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

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

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

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

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

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

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

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

関連書籍:

CSSエンコーディングを変換する方法

CSS3を使用して照明表示テキストアニメーションを作成する方法

CSS3読み込み特殊効果を作成する方法

以上がタグのネストを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。