方法1

Question

我正在使用本主题的答案＃1中的代码 - “Show a div onclick and hide the image that triggered it”

<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:

function show(target, trigger){
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
}

它运行良好，但我使用此onclick功能在页面上有4个div。当用户点击图像1时，会出现div 1，但是当他们点击图像2来切换div 2时，div 1仍然可见。

如何在触发显示另一个div时关闭open div？我只希望在页面上打开一个div，但是现在，所有4个都可以打开。

Answer 1

方法1

使用 jQuery 代码可以更轻松地完成此操作。

EXAMPLE HERE

HTML

<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>

<强> JQUERY

$("#img1").on('click', function() {
   $(this).hide();
   $("#div2, #div3, #div4").hide();
   $("#div1").show();
});

在单击img时，只需将显示/隐藏替换为您要显示或隐藏的内容。

TOP TIP： 您还可以使用toggle（）或fadeIn（）/ fadeOut（）

替换show / hide

toggle（）：每次点击都会在显示块和显示之间切换。

fadeIn（）：将与show（）相同，但使用漂亮的淡入淡出动画。

方法2

新方法是使用 CSS动画。测试往往表明CSS在处理动画方面的性能优于jQuery。

EXAMPLE HERE

HTML

<div id="imgWrap">
    <img id="img1" class="Active" data-box="div1"/>
    <img id="img2" data-box="div2"/>
    <img id="img3" data-box="div3"/>
    <img id="img4" data-box="div4"/>
</div>

<div id="divWrap">
    <div id="div1" class="Active">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

CSS

#divWrap div{
    opacity:0;
}
#divWrap .Active{
    opacity:1;
    -webkit-animation:fadeIn ease-in-out 0.5s;
    animation:fadeIn ease-in-out 0.5s;
}
@-webkit-keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}
@keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}

如果您不希望该元素在不可见时保留页面空间，请添加display:none/block以及opacity （请参阅小提琴）。

使用css的美妙之处在于你可以制作任何你想要的动画。当Active类添加到元素时，此代码将简单地触发动画。

Here are some animation examples

JAVASCRIPT

$('img').on('click', function () {
  var divID = $(this).attr('data-box');
  $(this).addClass('Active').siblings().removeClass('Active');
  $('#' + divID).addClass('Active').siblings().removeClass('Active');
})

最后添加一些javascript或jQuery，如上所示，在点击时添加Active类。在此示例中，Active已经硬编码到html中的一个元素，以在页面加载时创建默认的活动元素。

此代码还将Click添加到单击的按钮。这是可选的，但可用于将css样式添加到当前活动按钮。

Answer 2

var old_target,old_trigger;
function show(target, trigger){
   if(old_target!==undefined) document.getElementById(old_target).style.display = 'none';
   if(old_trigger!==undefined) old_trigger.style.display = "block";
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
   old_target = target;
   old_trigger = trigger;
}

只需保存对最后点击的目标/触发器的引用，并更改旧引用的样式。

Answer 3

我用固定的div做了这个。这是代码示例。

    <!DOCTYPE html>
    <html>

    <head>
        <script type="text/javascript" src="mc.js"></script>
        <link rel="stylesheet" type="text/css" href="mc.css">
    </head>

    <body onload=hideAll('mydiv1')>
        <div id='mydiv1'><img src='img/1.jpg' alt="Image 1.jpg Not Found"    height='300px' width='100%' />1</div>
        <div id='mydiv2'><img src='img/2.jpg' alt="Image 2.jpg Not Found" height='300px' width='100%' />2</div>
        <div id='mydiv3'><img src='img/3.jpg' alt="Image 3.jpg Not Found" height='300px' width='100%' />3</div>
        <div id='mydiv4'><img src='img/4.jpg' alt="Image 4.jpg Not Found" height='300px' width='100%' />4</div>
        <div id='mydiv5'><img src='img/5.jpg' alt="Image 5.jpg Not Found" height='300px' width='100%' />5</div>
        <div id='mydiv6'><img src='img/6.jpg' alt="Image 6.jpg Not Found" height='300px' width='100%' />6</div>
        <div id='mydiv7'><img src='img/7.jpg' alt="Image 7.jpg Not Found" height='300px' width='100%' />7</div>
        <div id='mydiv8'><img src='img/8.jpg' alt="Image 8.jpg Not Found" height='300px' width='100%' />8</div>
        <div id='mydiv9'><img src='img/9.jpg' alt="Image 9.jpgNot Found" height='300px' width='100%' />9</div>
        <div id='mydiv10'><img src='img/10.jpg' alt="Image 10.jpgNot Found" height='300px' width='100%' />10</div>
        <div id='mydiv11'><img src='img/11.jpg' alt="Image 11.jpgNot Found" height='300px' width='100%' />11</div>
        <div id='mydiv12'><img src='img/12.jpg' alt="Image 12.jpg Not Found" height='300px' width='100%' />12</div>
        <div id='mydiv13'><img src='img/13.jpg' alt="Image 13.jpg Not Found" height='300px' width='100%' />13</div>
        <div id='mydiv14'><img src='img/14.jpg' alt="Image 14.jpg Not Found" height='300px' width='100%' />14</div>
        <div id='mydiv15'><img src='img/15.jpg' alt="Image 15.jpg Not Found" height='300px' width='100%' />15</div>
        <div id='mydiv16'><img src='img/16.jpg' alt="Image 16.jpg Not Found" height='300px' width='100%' />16</div>
        <div id='mydiv17'><img src='img/17.jpg' alt="Image 17.jpg Not Found" height='300px' width='100%' />17</div>
        <div id='mydiv18'><img src='img/18.jpg' alt="Image 18.jpg Not Found" height='300px' width='100%' />18</div>
        <div id='mydiv19'><img src='img/19.jpg' alt="Image 19.jpg Not Found" height='300px' width='100%' />19</div>
        <div id="topMenu">
    <button type="button" onclick="hideAll('mydiv1')">1</button>
    <button type="button" onclick="hideAll('mydiv2')">2</button>
    <button type="button" onclick="hideAll('mydiv3')">3</button>
    <button type="button" onclick="hideAll('mydiv4')">4</button>
    <button type="button" onclick="hideAll('mydiv5')">5</button>
    <button type="button" onclick="hideAll('mydiv6')">6</button>
    <button type="button" onclick="hideAll('mydiv7')">7</button>
    <button type="button" onclick="hideAll('mydiv8')">8</button>
    <button type="button" onclick="hideAll('mydiv9')">9</button>
    <button type="button" onclick="hideAll('mydiv10')">10</button>
    <button type="button" onclick="hideAll('mydiv11')">11</button>
    <button type="button" onclick="hideAll('mydiv12')">12</button>
    <button type="button" onclick="hideAll('mydiv13')">13</button>
    <button type="button" onclick="hideAll('mydiv14')">14</button>
    <button type="button" onclick="hideAll('mydiv15')">15</button>
    <button type="button" onclick="hideAll('mydiv16')">16</button>
    <button type="button" onclick="hideAll('mydiv17')">17</button>
    <button type="button" onclick="hideAll('mydiv18')">18</button>
    <button type="button" onclick="hideAll('mydiv19')">19</button>
    <button type="button" onclick="hideAll()">Hide All</button>
    <button type="button" onclick="showAll()">Show All</button>
        </div>
    </body>

    </html>

CSS如下：另存为mc.css

     #topMenu {
         width: 100%;
         text-align: center;
         position: fixed;
         background-color: black;
         color: white;
         left: 0px;
         top: 0px;
     }

     div#mydiv1,
     div#mydiv2,
     div#mydiv3,
     div#mydiv4,
     div#mydiv5,
     div#mydiv6,
     div#mydiv7,
     div#mydiv8,
     div#mydiv9,
     div#mydiv10,
     div#mydiv11,
     div#mydiv12,
     div#mydiv13,
     div#mydiv14,
     div#mydiv15,
     div#mydiv16,
     div#mydiv17,
     div#mydiv18,
     div#mydiv19,
     div#mydiv20 {
         text-align:center;
         width: 600px;
         height: auto;
         position: fixed;
         left: 25%;
         top: 20px;
     }

     div>button {
         text-align: center;
     }

Javascript如下：另存为mc.js

    function hideAll(Adiv) {
         var text = "";
         var i;

         for (i = 1; i < 20; i++) {
             var text = ""
             text += "mydiv" + i;
             document.getElementById(text).style.visibility = "hidden";
         }
         document.getElementById(Adiv).style.visibility = "visible";
     }

     function showAll(Adiv) {
         var text = "";
         var i;

         for (i = 1; i < 20; i++) {
             var text = ""
             text += "mydiv" + i;
             document.getElementById(text).style.visibility = "visible";
         }

     }

显然，您可以添加更多图像，并将它们放在与我相同的区域中。该

onclick显示div，但在单击其他人时隐藏

3 个答案:

方法1

EXAMPLE HERE

方法2

EXAMPLE HERE