当前位置：theitroad>jQuery onclick 显示 div，但在单击其他 div 时隐藏

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/19251340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 23:32:27 　来源:igfitidea点击:

onclick show div, but hide when other one is clicked

javascriptjqueryhtmlcss

提问by christine

I'm working with the code from this topic's answer #1 -- "Show a div onclick and hide the image that triggered it"

我正在使用本主题答案 #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"
}

It works great, but I have 4 divs on a page using this onclick feature. When a user clicks on image 1, div 1 appears, but when they click on image 2 to toggle div 2, div 1 is still visible.

它工作得很好，但我在使用此 onclick 功能的页面上有 4 个 div。当用户点击图片 1 时，div 1 出现，但当他们点击图片 2 切换 div 2 时，div 1 仍然可见。

How can I make it so that the open div closes when another one is triggered to show? I only want one div to be open on a page, but right now, all 4 can be open.

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

回答by DreamTeK

METHOD 1

方法一

This can be done much easier with jQuerycode.

使用jQuery代码可以更容易地做到这一点。

EXAMPLE HERE

示例在这里

HTML

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

Simply replace show / hide with what you want to show or hide when the img is clicked.

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

TOP TIP:You can also replace show/hide with toggle() or fadeIn() /fadeOut()

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

toggle() : Will alternate between display block and display none with each click.

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

fadeIn() : Will do the same as show() but with a nice fade animation.

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

METHOD 2

方法二

The new way is to use CSS animations. Tests tend to show that CSS is better on performance at handling animations than jQuery.

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

EXAMPLE HERE

示例在这里

HTML

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

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

Add display:none/blockalong with opacity(see fiddle)if you do not want the element to reserve page space when it is not visible.

如果您不希望元素在不可见时保留页面空间，请添加display:none/blockwith opacity（参见 fiddle）。

The beauty of using css is you can make the animation anything you want. This code will simply trigger the animation when the Activeclass is added to the element.

使用 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');
})

Lastly add some javascript or jQuery as above to add the Active class on click. In this example Active has been hardcoded to one element in the html to create a default active element on page load.

最后添加一些 javascript 或 jQuery 如上所述以在单击时添加 Active 类。在这个例子中，Active 已经被硬编码到 html 中的一个元素，以在页面加载时创建一个默认的 active 元素。

This code also adds Active to the button clicked. This is optional but can be used to add css styling to the currently active button.

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

回答by Quad

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

Just save references to last clicked target/triggers and change styles of that old references.

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

回答by JSJunkie

I have done this with a fixed div. Here is the code examples.

我已经用一个固定的 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>

The CSS is as follows: Save as mc.css

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 as follows : save as mc.js

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

     }

Obviously you can add more images and place them in the same area as I did. The

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

相关推荐

使用 jQuery 更新 textarea 值更改上的文本

使用 jQuery 更新 textarea 值更改上的文本

jQuery：检查所有 <DIV> 或 <Span> 是否包含特定文本

jQuery：检查所有 <DIV> 或 <Span> 是否包含特定文本

jQuery 在 append() 上做一些事情

jQuery 在 append() 上做一些事情

jQuery 使用ajax json数据创建highchart

jQuery 使用ajax json数据创建highchart