a链接嵌套无效，嵌套链接最优解决办法

<a>不支持嵌套。例如：

<a href="#1">11111111111<a href="#2">22222222222</a></a>

浏览器会将其解析为相邻兄弟关系，而不是父子关系。

所以，如果我们有链接嵌套的需求，就可以试试使用<area>元素。

对于传统嵌套链接一般方法有：

1.改变视觉DOM结构和顺序，使链接内容变成相邻关系，再通过CSS重新布局定位。

2.使用JS，点击目标区域preventDefault阻止默认事件，然后再location.href跳转之类

实际上，还有一种更好的做法，就是<a>元素中嵌套<area>元素，可以保证DOM结构符合视觉呈现，又无需JS辅助。

eg.

<a href="......" class="book-layout" target="_blank">

    <img src="book.jpg" class="book-cover" alt="area" usemap="#bookCover">

    <map id="bookCover" name="bookCover">

        <area shape="rect" coords="0,0,200,21" href="/book/1003477570" alt="area" target="_blank">

    </map>

</a>
通过<a>元素中嵌套<map>和<area>对于图片类的链接可完美使用，
如果是文字类的链接由于考虑到Firefox浏览器不支持（Firefox的<area>元素默认display:none，且无法重置，同时ie8及以下不支持，
可以使用透明图片覆盖 然后使用<area>。
如果无需考虑firefox等兼容性，可直接使用 position:absolute实现,使用<area>元素覆盖的方法还有一些局限:无法使用键盘Tab索引访问，如果没有外面的<a>元素是可以的，有了之后，这种取巧的做法就不行了

<h4 class="book-title">

    <area class="area" href="....." target="_blank">

    area

</h4>

.book-title {

    position:relative;

}

.book-title > .area {

    position: absolute;

    left: 0; top: 0;

    width: 100%; height: 100%;

}

具体更多内容可访问原创作者http://www.zhangxinxu.com/wordpress/2017/05/html-area-map/

巴特西

a链接嵌套无效，嵌套链接最优解决办法

最新文章

热门文章