0

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について教えてください

4

1 に答える 1

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

});
于 2012-09-21T09:01:32.030 に答える