Question

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

Answer 1

将隐藏类提供给所有div，然后你可以通过执行来隐藏整个div类（使用Jquery）：

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

希望这有帮助！

使DIV出现，另一个消失

1 个答案: