代码之家 › 专栏 › 技术社区 › user1540435

使一个DIV出现,另一个DIV消失

area hidden dom-events image html

user1540435 · 技术社区 · 12 年前

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

1 回复 | 直到 4 年前

Pierre 12 年前

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

希望这能有所帮助!