Html 使一个DIV出现，另一个DIV消失

当我点击图片上的某个区域时，我不知道如何使隐藏的DIV出现

如果一个隐藏的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>

雷格尔恩
我是埃勒普纳尔·德雷恩·蒂尔斯基尔纳德·德雷恩·德雷恩·德雷恩·德雷恩·斯泰尔纳德·德雷恩·德雷恩·德雷恩·斯泰尔纳德。
Förr fanns uttrycket是雷格拉·德伦。在科洛夫

Tryckesfall（Fallregeln）
在圣奥尔的瓦拉街上，德雷恩街和乌塔街都是雷格尔街
乌特森德。Regelnär stum och tryckesfallet skjuts和eller ger vika pga。
斯奈达·乌特福明·诺尔·德伦·斯特恩斯女士（dess sneda Utforming när dörren stängs）

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（'MapTryCkesRoddar'）。onclick=document.getElementById（'TryCkesRoddar'）。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'；

将隐藏类赋予所有div，然后您可以通过（使用Jquery）隐藏整个div类：

这将使用class=“Hidden”隐藏所有div

现在假设您希望使div id=“div_1”在默认情况下可见，那么您将添加：

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

现在，您必须创建将打开其他div的链接，如：

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

---

希望这有帮助

我没有工作，所以这是正确的

$（'.hidden'）.hide（）；$（'.open_div'）。单击（function（）{//当单击class=“open_div”时$（'.Hidden'）。hide（）；//隐藏所有div$（$（this.attr（'href'））.show（）；//显示id=“div_3”div return false；//返回false，以便浏览器不尝试打开链接}）您需要用：$（document）包围js代码。ready（function（）{/*此处的所有代码*/}）使用firebug控制台确保js代码中没有错误。您还可以使用alert（$（this.attr（'href'））；为了确保它尝试打开正确的div id。。。
<a href="#div_3" class="open_div">Show div_3</a>

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