logo标签列表

点击时显示div，但在点击其他div时隐藏

javascriptjqueryhtmlcss
4

我正在使用该主题答案 #1 的代码 -- "点击显示 div 并隐藏触发它的图像"

<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"
}

这个功能很好用，但是我的页面上有4个div使用了这个onclick特性。当用户点击图像1时，div 1出现了，但是当他们点击图像2切换到div 2时，div 1仍然可见。

我该如何让打开的div在另一个div被触发显示时关闭？我只想在页面上打开一个div，但现在，所有4个div都可以打开。

使用jQuery非常容易实现。 - Liauchuk Ivan
你是在尝试制作某种画廊吗？如果是的话，可以访问http://fancyapps.com/fancybox/。 - Feanor
1
@puku为什么不与大家分享呢？ - Ryan McDonough
3个回答
16

方法一

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

这里有示例

HTML

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

JQUERY

->

JQUERY

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

当点击图片时，只需将show/hide替换为您想要显示或隐藏的内容即可。

顶级提示： 您还可以将show/hide替换为toggle()或fadeIn()/fadeOut()

toggle()：每次单击时会在display block和display none之间交替显示。

fadeIn()：与show()相同，但带有漂亮的淡入动画。

方法2

新方式是使用CSS动画。测试表明，CSS在处理动画方面的性能比jQuery更好。

示例在此处

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（请参见fiddle）一起添加。

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

这里提供了一些动画示例。

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中的一个元素，以创建默认的活动元素。

该代码还将Active添加到所点击的按钮。这是可选的，但可以用于向当前活动按钮添加CSS样式。

3
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;
}

只需保存最近单击的目标/触发器的引用并更改旧引用的样式。

1
我用一个固定的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";
         }

     }

显然，您可以添加更多的图像并将它们放置在与我相同的区域。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接