a標簽嵌套解決方案 · 前端

>[danger]p標簽內嵌一個p標簽時瀏覽器顯示的是同級的關系，且會出現3個p標簽，a標簽內嵌a標簽時瀏覽器顯示的是同級的關系，不再是父子級關系但是不會出現3個a標簽原理： >* 內聯元素：可以嵌套內聯元素，不可以嵌套塊級元素 >* 塊級元素：可以嵌套塊級元素，或者是內聯元素 >* 部分塊級元素：不能嵌套塊級元素，只能嵌套內聯元素，如：p、h1~h6 ``` <a target="_self" href="www.xxx.com"> <a target="_blank" href="www.xxx.com"> ``` [a標簽嵌套解決方案](https://www.xyhtml5.com/22932.html) ## 問題在實際網頁布局之中，我們有時候需要一整塊點擊區域中間還要有部分按鈕點擊，也就是需要a標簽嵌套a標簽，如下： ~~~  <a href="#炫H5">outerA <a href="#炫H5inner">innerA</a> </a> ~~~ 但是我們會發現，這種嵌套，瀏覽器會直接錯誤解析，解析結果如下： ~~~ <!-- 而瀏覽器則會解析成 -- > <a href="#炫H5">outerA</a> <a href="#炫H5inner">innerA</a> ~~~ 那么針對這種情況如何解決呢？ ## 方案一：使用object標簽進行嵌套例如我么如下寫，就不會錯誤解析了！ ~~~ <a href="#炫H5"> outerA <object><a href="#炫H5inner">innerA</a></object> </a> ~~~ 這種寫法的典型應用最多的是列表整個需要點擊，列表里面有電話號碼需要單獨點擊撥打！ ~~~ <a href="https://www.xyhtml5.com/post/a_qiantaofangan/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2"> 列表內容 <object><a href="tel:694434565">撥打電話</a></object> </a> ~~~ ## 方案二：使用定位方式這種方式是迫不得已的方式，思路就是我們不用嵌套。直接代碼如下書寫： ~~~ <a href="#炫H5">outerA</a> <a href="#炫H5inner">innerA</a> ~~~ 外層的炫H5通過設置display:inline-block，以及絕對定位，將其放在里層a標簽的位置。然后通過調整里層a標簽及外層a的z-index大小，使得鼠標能正確選中a標簽；這種方法的核心思想就是通過**定位**來模擬實現我們想要達到的效果！ ## 方案三：使用 HTML的標簽來實現記得在學校學校網頁制作的時候，用的是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="#炫H5"> outerA <map> <area shape="rect" coords="0,0,200,21" href="https://www.xyhtml5.com/post/a_qiantaofangan/炫H5inner" > </map> </a> ~~~ ## 方案四：使用span等標簽加js事件來代替a標簽當然我們也可以用span，標簽等替代a標簽，只不過要多寫一些js跳轉代碼了，通過js來實現a標簽所能實現的效果！