0

写真の領域をクリックしたときに、非表示のDIVを表示する方法がわかりません。

また、非表示のDIVが表示されている場合、新しいDIVが表示される前にそれを非表示にする方法-画像上の別のクリック可能な領域をクリックしたとき。

写真には7つのクリック可能な領域があります。

これが私のHTMLページの一部です

テストして、hrefJavaScriptが機能しないことがわかりました。

<div class="" > 
  <img src="Pictures/image7.jpg" alt="" width="449" height="436" usemap="#Map" border="0"  />
        <map name="Map" id="Map">
        
            <area id="MapRegel" alt="Regel" shape="poly"
            coords="0,235,-2,151,185,126,218,141,200,184,111,185,112,234" 
            href="javascript:document.getElementById('MapRegel').onclick = 
            document.getElementById('Regel').style.visibility = 'visible';" />                          
            
            <area id="MapHakRegel" alt="HakRegel" shape="poly"
            coords="118,284,231,282,261,228,267,168,224,145,203,188,114,187" 
            href="javascript:document.getElementById('MapRegel').onclick = 
            document.getElementById('HakRegel').style.visibility = 'visible';" />
                
        </map>
        
        <div class="Hidden" id="Regel">
            <h2>Regeln</h2>
            <p>Är den som låser eller öppnar dörren till skillnad från tryckesfallet som bara håller dörren stängd. 
            Förr fanns uttrycket att man reglar dörren. En symetrisk rektangulär kolv. </p>
        </div>
        
        <div class="Hidden" id="HakRegel">
            <h2>Tryckesfall (Fallregeln)</h2>   
            <p>Den regel som håller dörren stängd utan att vara låst och är sned till 
            utseende. Regeln är stum och tryckesfallet skjuts undan eller ger vika pga. 
            dess sneda utformning när dörren stängs.</p>
        </div>                  

        <div class="Hidden" id="Tryckesfall"></div>
        <div class="Hidden" id="TryckesRoddare"></div>
        <div class="Hidden" id="CylinderRoddare"></div>
        <div class="Hidden" id="DomsNyckelAvstand"></div>
        <div class="Hidden" id="Stolpe"></div>  
        <script type="text/javascript"> 
            document.getElementByClass('Hidden').onclick = style.visibility = 'hidden';
            document.getElementById('MapRegel').onclick = document.getElementById('Regel').style.visibility = 'visible';
            document.getElementById('MapHakRegel').onclick = document.getElementById('HakRegel').style.visibility = 'visible';
            document.getElementById('MapTryckesfall').onclick = document.getElementById('Tryckesfall').style.visibility = 'visible';
            document.getElementById('MapTryckesRoddare').onclick = document.getElementById('TryckesRoddare').style.visibility = 'visible';
            document.getElementById('MapCylinderRoddare').onclick = document.getElementById('CylinderRoddare').style.visibility = 'visible';
            document.getElementById('MapDomsNyckelAvstand').onclick = document.getElementById('DomsNyckelAvstand').style.visibility = 'visible';
            document.getElementById('MapStolpe').onclick = document.getElementById('Stolpe').style.visibility = 'visible';
        </script>
    </img>
</div>
4

1 に答える 1

0

すべてのdivにHiddenクラスを指定すると、（Jqueryを使用して）実行することでdivのクラス全体を非表示にできます。

$('.Hidden').hide();

これにより、class="Hidden"ですべてのdivが非表示になります

ここで、デフォルトでdiv id = "div_1"を表示したいとします。次に、次を追加します。

$('#div_1').show();

次に、次のように、他のdivを開くリンクを作成する必要があります。

<a href="#div_3" class="open_div">Show div_3</a>

そしてjqueryで：

    $('.open_div').click(function(){ //when a class="open_div" is clicked
      $('.Hidden').hide(); //hide all divs
      $($(this).attr('href')).show(); //show the id="div_3" div
      return false; //return false so your browser doesn't try to open the link
    });

お役に立てれば！

于 2012-07-20T10:54:59.197 に答える