使用图像映射显示和隐藏 div 个元素
Use image maps to show and hide div elements
到目前为止,这是我的代码..
我希望只有在用户单击蓝色圆圈等时才会向用户显示蓝色文本...
我想我只需要更改 div 元素的属性,但我对 jQuery 不太满意并且不确定最优雅的方法。
HTML
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
<area shape="circle" coords="50,75,50" href="#" item="red"/>
<area shape="circle" coords="150,75,50" href="#" item="blue"/>
<area shape="circle" coords="250,75,50" href="#" item="yellow"/>
</map>
<div class="one" style="display:none" id="redtext">
<h5>
HelloRed
</h5>
</div>
<div class="one" style="display:none" id="bluetext">
<h5>
HelloBlue
</h5>
</div>
<div style="display:none" id="yellowtext">
<h5>
HelloYellow
</h5>
</div>
jQuery
$('[item="red"]).click(function() {
$(".one").hide();
$("#redtext").show();
return false;
});
您当前的代码只是缺少选择器上的结束引号和 fiddle 中的 jQuery。解决这些问题后它会起作用:
也就是说,您可以通过遵循 DRY 原则来改进逻辑。为此,您可以在 area
元素上放置一个公共 class 以及一个 data
属性来指定在单击时应显示哪个元素。然后,您可以对所有这些事件使用一个事件处理程序。试试这个:
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
<area shape="circle" coords="50,75,50" href="#" class="circle" data-target="redtext" />
<area shape="circle" coords="150,75,50" href="#" class="circle" data-target="bluetext" />
<area shape="circle" coords="250,75,50" href="#" class="circle" data-target="yellowtext" />
</map>
<div class="one" id="redtext">
<h5>HelloRed</h5>
</div>
<div class="one" id="bluetext">
<h5>HelloBlue</h5>
</div>
<div class="one" id="yellowtext">
<h5>HelloYellow</h5>
</div>
$('.circle').click(function(e) {
e.preventDefault();
$(".one").hide().filter('#' + $(this).data('target')).show();
});
到目前为止,这是我的代码..
我希望只有在用户单击蓝色圆圈等时才会向用户显示蓝色文本...
我想我只需要更改 div 元素的属性,但我对 jQuery 不太满意并且不确定最优雅的方法。
HTML
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
<area shape="circle" coords="50,75,50" href="#" item="red"/>
<area shape="circle" coords="150,75,50" href="#" item="blue"/>
<area shape="circle" coords="250,75,50" href="#" item="yellow"/>
</map>
<div class="one" style="display:none" id="redtext">
<h5>
HelloRed
</h5>
</div>
<div class="one" style="display:none" id="bluetext">
<h5>
HelloBlue
</h5>
</div>
<div style="display:none" id="yellowtext">
<h5>
HelloYellow
</h5>
</div>
jQuery
$('[item="red"]).click(function() {
$(".one").hide();
$("#redtext").show();
return false;
});
您当前的代码只是缺少选择器上的结束引号和 fiddle 中的 jQuery。解决这些问题后它会起作用:
也就是说,您可以通过遵循 DRY 原则来改进逻辑。为此,您可以在 area
元素上放置一个公共 class 以及一个 data
属性来指定在单击时应显示哪个元素。然后,您可以对所有这些事件使用一个事件处理程序。试试这个:
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
<area shape="circle" coords="50,75,50" href="#" class="circle" data-target="redtext" />
<area shape="circle" coords="150,75,50" href="#" class="circle" data-target="bluetext" />
<area shape="circle" coords="250,75,50" href="#" class="circle" data-target="yellowtext" />
</map>
<div class="one" id="redtext">
<h5>HelloRed</h5>
</div>
<div class="one" id="bluetext">
<h5>HelloBlue</h5>
</div>
<div class="one" id="yellowtext">
<h5>HelloYellow</h5>
</div>
$('.circle').click(function(e) {
e.preventDefault();
$(".one").hide().filter('#' + $(this).data('target')).show();
});