如何直接在标签href区域形状中插入div [英] how to insert div directly in tag href area shape

问题描述

我想知道是否可以插入以下divs

I wish to know if it is possible to insert following divs

<div id="cal1"> [dopbsp id="1"  lang=it]</div>

<div id="cal2"> [dopbsp id="1"  lang=it]</div>

<div id="cal3"> [dopbsp id="1"  lang=it]</div>

直接在标签中 href 图片地图链接由以下不同的形状区域

directly in the tag href image map linked by different shape areas as following

<area shape="circle" coords="160,59,20" href="#">
<area shape="circle" coords="111,58,20" href="#">
<area shape="circle" coords="60,59,20"  href="#">

所以当我点击形状区域，例如

so that when I click on shape area, for example

<area shape="circle" coords="160,59,20" href="#">

然后通讯员div，例如

then correspondent div, for example

<div id="cal1"> [dopbsp id="1"  lang=it]</div>

在地图下载入
Ps： dopbsp id = 1 ...是wordpress的日历预订插件

is loaded under the map image Ps: dopbsp id="1" ... is a calendar booking plugin of wordpress

谢谢

推荐答案

你不能。 < area> 不能有任何子元素。请参阅区域标签或全球Web简报工作草案 href =https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area =nofollow> Mozilla开发人员网络说明了解更多信息。

You cannot. <area> cannot have any child elements. See the World-wide Web compendium working draft on the area tag or the Mozilla Developer Network description for more information.

这样做的方法是将给定的< area> 与给定的< div> 通过ID，并使用JavaScript来显示/隐藏< div> 当您点击< area> 。沿着以下行：

The way to do this is to connect a given <area> with a given <div> via IDs and use JavaScript to show/hide the <div> when you click on an <area>. Along the lines of:

<area shape="circle" coords="160,59,20" href="#id-of-div-1">
<area shape="circle" coords="111,58,20" href="#id-of-div-2">
<area shape="circle" coords="60,59,20"  href="#id-of-div-3">

<div class="divs-to-show-hide">
 <div id="id-of-div-1">some content here</div>
 <div id="id-of-div-2">some content here</div>
 <div id="id-of-div-3">some content here</div>
</div>

jQuery

$('area').on('click',function(e) {
 e.preventDefault();
 $(this.href).show().siblings().hide();
});

这篇关于如何直接在标签href区域形状中插入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！