a標(biāo)簽里面再嵌套其他元素，你肯定會(huì)遇到的。

問題

在實(shí)際網(wǎng)頁布局之中，我們有時(shí)候需要一整塊點(diǎn)擊區(qū)域中間還要有部分按鈕點(diǎn)擊，也就是需要a標(biāo)簽嵌套a標(biāo)簽，如下：

<!-- a標(biāo)簽進(jìn)行嵌套的時(shí)候 --><a href="#haorooms">outerA    <a href="#haoroomsinner">innerA</a></a> 

但是我們會(huì)發(fā)現(xiàn)，這種嵌套，瀏覽器會(huì)直接錯(cuò)誤解析，解析結(jié)果如下：

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

那么針對(duì)這種情況如何解決呢?

方案一：使用object標(biāo)簽進(jìn)行嵌套 

例如我么如下寫，就不會(huì)錯(cuò)誤解析了！

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

這種寫法的典型應(yīng)用最多的是列表整個(gè)需要點(diǎn)擊，列表里面有電話號(hào)碼需要單獨(dú)點(diǎn)擊撥打！

<a class="haorooms_list" href="跳轉(zhuǎn)頁面"> 
    列表內(nèi)容    <object><a href="tel:694434565">撥打電話</a></object></a> 

方案二：使用定位方式

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

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

外層的haorooms通過設(shè)置display:inline-block，以及絕對(duì)定位，將其放在里層a標(biāo)簽的位置。然后通過調(diào)整里層a標(biāo)簽及外層a的z-index大小，使得鼠標(biāo)能正確選中a標(biāo)簽；這種方法的核心思想就是通過定位來模擬實(shí)現(xiàn)我們想要達(dá)到的效果！

方案三：使用 HTML的 < area>< map>標(biāo)簽來實(shí)現(xiàn)

記得在學(xué)校學(xué)校網(wǎng)頁制作的時(shí)候，用的是dreamweaver，dreamweaver中可以使用圖片熱區(qū)來實(shí)現(xiàn)圖片的點(diǎn)擊效果。沒錯(cuò)，我們可以使用熱區(qū)來實(shí)現(xiàn)a標(biāo)簽的嵌套效果啊!

area標(biāo)簽很久沒有使用了，普及一下基礎(chǔ)知識(shí)：

area可以指定shape及coords。

• 如果 shape 屬性設(shè)置為 "rect"，則該值規(guī)定矩形左上角和右下角的坐標(biāo)。(x1,y1,x2,y2)
• 如果 shape 屬性設(shè)置為 "circ"，則該值規(guī)定圓心的坐標(biāo)和半徑。(x,y,radius)
• 如果 shape 屬性設(shè)置為 "poly"，則該值規(guī)定多邊形各頂點(diǎn)的值。如果***個(gè)坐標(biāo)和***一個(gè)坐標(biāo)不一致，那么為了關(guān)閉多邊形，瀏覽器必須添加***一對(duì)坐標(biāo)。(x1,y1,x2,y2,..,xn,yn)

area和map要配合使用，可以在圖片上面指定部分熱區(qū)，也可以在列表中指定熱區(qū)。

假如我們運(yùn)用area和map在列表中a標(biāo)簽內(nèi)部指定熱區(qū)，就可以實(shí)現(xiàn)類似我們上面a標(biāo)簽嵌套的效果了!

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

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

方案四：使用span等標(biāo)簽加js事件來代替a標(biāo)簽 

當(dāng)然我們也可以用span，標(biāo)簽等替代a標(biāo)簽，只不過要多寫一些js跳轉(zhuǎn)代碼了，通過js來實(shí)現(xiàn)a標(biāo)簽所能實(shí)現(xiàn)的效果!

 【本文為51CTO專欄作者“謝軍”的原創(chuàng)稿件，轉(zhuǎn)載可通過作者微信公眾號(hào)(jingfeng18)獲取聯(lián)系】

戳這里，看該作者更多好文