4

我正在使用本主题答案#1 中的代码——“显示 div onclick 并隐藏触发它的图像”

<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 在另一个被触发显示时关闭？我只希望一个 div 在页面上打开，但现在，所有 4 个都可以打开。

4

3 回答 3

16

方法一

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

这里的例子

HTML 

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

查询

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

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

重要提示： 您还可以用 toggle() 或 fadeIn() /fadeOut() 替换显示/隐藏

toggle() ：每次单击时将在显示块和不显示之间交替。

fadeIn() : 和 show() 一样，但是有一个漂亮的淡入淡出动画。

方法二

新方法是使用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 （参见小提琴）一起添加。

使用 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 样式添加到当前活动按钮。

于 2013-10-08T15:12:46.037 回答
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;
}

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

于 2013-10-08T15:09:08.290 回答
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";
         }

     }

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

于 2016-03-24T02:53:24.533 回答