我正在使用C#开发ASP.net2.0应用程序。在这个项目中使用的Html 5.0版本。
我有一个图像,其中定义了坐标,并且点击图像的每个坐标,相应的剖面数据应该是可见的。
例如,如果单击#service,则应显示"<section class="service">"
部分。
如果单击#new_generation,则应显示<section class="new_generation">
部分。
它应该使用ajax加载。
<section role="parallax" class="parallax cf">
<map name="home_menu">
<area class="selected" shape="poly" coords="140,0,0,105,85,105,225,0" href="#supplier" alt="SUPPLIER">
<area shape="poly" coords="227,0,87,105,172,105,312,0" href="#service" alt="FULL SERVICE CARRIER">
<area shape="poly" coords="314,0,174,105,259,105,399,0" href="#new_generation" alt="NEW GENERATION AIRLINE">
<area shape="poly" coords="401,0,261,105,346,105,486,0" href="#air_freight" alt="AIR FREIGHT CARRIER">
<area shape="poly" coords="488,0,348,105,433,105,573,0" href="#charter" alt="CHARTER AIRLINE">
<area shape="poly" coords="575,0,435,105,520,105,660,0" href="#cargo" alt="CARGO & LOGISTICS COMPANY">
<area shape="poly" coords="662,0,522,105,607,105,747,0" href="#hotel" alt="HOTEL GROUP">
<area shape="poly" coords="749,0,609,105,694,105,834,0" href="#events" alt="EVENTS ORGANISER">
</map>
</section>
<section class="home_menu_tabs">
<section class="supplier selected"></section>
<section class="service">
Service Content Here comes from database, should loads using Ajax
</section>
<section class="new_generation">
New Generation Content Here comes from database, should loads using Ajax
</section>
<section class="air_freight"></section>
<section class="charter"></section>
<section class="cargo"></section>
<section class="hotel"></section>
<section class="events"></section>
</section>
请帮助jquery
答案 0 :(得分:0)
如果您想通过点击任何地图区域来显示该部分
这将有助于
$(function(){
var sections = $('.home_menu_tabs section');
sections.hide();
$('map').on('click', 'area', function(){
sections.hide();
var href =$(this).prop('href');
var sectionClass = href.substr(href.lastIndexOf('#')+1);
//your ajax code to load content.
$('.'+sectionClass).show();
});
});