a標籤嵌套怎麼解決

我們知道，在實際的網頁佈局之中，有時候是需要一整塊點擊區域中間還要有部分的按鈕點擊，那麼就是A標籤嵌套A標籤了

fa14d86af3f46df06f3d69613f172f3e6f4f7058e7805f3bde7858b4ff993cebouterA    0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

#但我們會發現，這個嵌套，瀏覽器會直接錯誤解析，解析結果如下：

626d5f5cb926a2c7e0d8fdbf73cd97ee
6f4f7058e7805f3bde7858b4ff993cebouterA5db79b134e9f6b82c0b36e0489ee08ed
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

那麼針對這種情況如何解決呢？

方案一：使用object標籤進行嵌套

例如我麼如下寫，就不會錯誤解析了！

<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>

方案二：使用定位方式

這種方式是迫不得已的方式，想法就是我們不用嵌套。直接程式碼如下書寫：

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

外層的haorooms透過設定display:inline-block，以及絕對定位，將其放在裡層a標籤的位置。然後透過調整裡層a標籤及外層a的z-index大小，使得滑鼠能正確選取a標籤；

這種方法的核心思想就是透過定位來模擬實現我們想要達到的效果！

方案三：使用HTML的e25c1ca73a58c3b803f51abd379a178166d2716aece816356865ea8c573ad16c標籤來實現

記得在學校學校網頁製作的時候，用的是dreamweaver，dreamweaver中可以使用圖片熱區來實現圖片的點擊效果。沒錯，我們可以使用熱區來實現a標籤的嵌套效果啊！

area標籤很久沒使用了，普及一下基礎：

area可以指定shape及coords。

如果 shape 屬性設定為 "rect"，則該值規定矩形左上角和右下角的座標。 （x1,y1,x2,y2）

如果 shape 屬性設定為 "circ"，則該值規定圓心的座標和半徑。 （x,y,radius）

若 shape 屬性設為 "poly"，則該值規定多邊形各頂點的值。如果第一個座標和最後一個座標不一致，那麼為了關閉多邊形，瀏覽器必須加入最後一對座標。 （x1,y1,x2,y2,..,xn,yn）

area和map要配合使用，可以在圖片上面指定部分熱區，也可以在清單中指定熱區。

假如我們運用area和map在列表中a標籤內部指定熱區，就可以實現類似我們上面a標籤嵌套的效果了！

還是上面的例子，我們可以如下書寫：

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

方案四：使用span等標籤加js事件來取代a標籤

當然我們也可以用span，標籤等替代a標籤，只不過要多寫一些js跳轉程式碼了，透過js來實現a標籤所能實現的效果！

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS的編碼怎麼轉換

怎麼用CSS3做出燈光照射顯示文字動畫

CSS3的loading特效怎麼製作

以上是a標籤嵌套怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！