使一個DIV appare和另一個要失望

Question

我不知道如何使一個隱藏的DIV出現，當我點擊圖片上的一個區域時。

如果隱藏的DIV是可見的，如何在新圖片出現之前消失 - 當我點擊圖片上的另一個可點擊區域時。

我的圖片上有7個可點擊區域。

這裏是我的HTML頁的一部分

我剛纔通過測試該HREF發現JavaScript的不工作

 <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> 

Answer 1

給隱藏類所有的div，然後你就可以通過這樣做（用jQuery）隱藏全班股利：

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

這將隱藏所有帶class = 「隱藏」

股利

現在讓我們假設你想在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 
    }); 

希望這有助於！