<!-- a標簽進行嵌套的時候 --><a href="#haorooms">outerA <a href="#haoroomsinner">innerA</a></a>

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

<!-- 而瀏覽器則會解析成 -- >
<a href="#haorooms">outerA</a>
<a href="#haoroomsinner">innerA</a>

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

方案一：使用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的 < area>< map>標簽來實現

記得在學校學校網頁制作的時候，用的是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中文網其它相關文章！