0

当我单击图片上的某个区域时，我不知道如何使隐藏的 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>
4

1 回答 1

0

将 Hidden 类赋予所有 div，然后您可以通过 (使用 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 回答