Question

我正在使用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

Answer 1

如果您想通过点击任何地图区域来显示该部分

这将有助于

$(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();
    });

});

在点击图像坐标时显示使用ajax的内容，并显示相关部分

1 个答案: