使用area標簽實現標簽的嵌套
阿新 • • 發佈：2018-02-27
set 兄弟節點 標簽 而且 tle mage 最新 inf 新版
在項目中我們會碰到這種需求：即點擊這個整個a標簽跳轉到一個頁面，點擊a裏面的某個a再跳轉到另一個頁面。有人會說，這還不簡單，直接a標簽嵌套a標簽，可是事實如此嗎，看代碼：
<a href="#">clickOne<a href="#">clickTwo</a></a>
此時的節點結構是a嵌套這a，但是經過頁面解析以後：
嵌套關系成了兄弟關系。這是因為a標簽不能去嵌套a標簽，所以瀏覽器會默認的把他們解析為兄弟節點的關系。
那怎麽才能嵌套呢，這個時候我們的主角area標簽就出場了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
position: relative;
}
span area {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<a href="./../details/six.html">
clickOne
<span>
<area href="./../tabindex/index.html" alt="test">
clickTwo
</span>
</a>
</body>
</html>
area標簽的href屬性可以實現頁面跳轉，而且可以嵌套在任何元素裏面（但是在最新版本的火狐瀏覽器裏面不支持，僅支持谷歌瀏覽器）
使用area標簽實現標簽的嵌套