使用JavaScript或jQuery隐藏和显示元素

Hiding and Showing Elements with JavaScript or jQuery

本文关键字：显示 元素 隐藏 jQuery JavaScript 使用      更新时间：2023-09-26

我的网站上有一个箭头，如果单击，它会隐藏一个元素，并显示另一个元素。再次点击它，将隐藏显示的元素，并显示隐藏的元素。

例如，我有

<div id="arrow"><a href="#">▾</a></div>
<div id="ad"></div>
<div id="description">Hidden</div>
<div id="nav">Also Hidden</div>

所以一开始，广告正在显示，然后你点击了箭头，我希望广告隐藏起来，然后取消隐藏描述和导航。

使用jQuery，使用.toggle():

$("#arrow").click(function () {
   $("#ad, #description, #nav").toggle();
});​

演示。

使用纯JavaScript，您需要手动切换每个元素的display属性：

document.getElementById("arrow").onclick = function () {
    var description = document.getElementById("description"); 
    var nav = document.getElementById("nav"); 
    var ad = document.getElementById("ad");
    if (ad.style.display == 'none') {
      ad.style.display = '';
      nav.style.display = 'none';   
      description.style.display = 'none';
    } else {
      ad.style.display = 'none';
      nav.style.display = '';   
      description.style.display = '';
    }
};​​​​​​

演示。

试试这个（因为你要求使用纯javascript）

window.onload=function(){
    var arrow=document.getElementById('arrow').getElementsByTagName('a')[0];
    arrow.onclick=function(){
        var ad=document.getElementById('ad');
        var description=document.getElementById('description');
        var nav=document.getElementById('nav');
        if(ad.style.display=='none')
        {
            ad.style.display='block';
            description.style.display='none';
            nav.style.display='none';
        }
        else
        {
            ad.style.display='none';
            description.style.display='block';
            nav.style.display='block';
        }
        return false;
    };
};

演示。​

演示

   ​​ <input id="x" value="x" />
    <input id="y" value="y" style="visibility:hidden" />
    <input type="button" onclick="toggleBoth()" value="arrow" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


function toggle(id){
  var elem = document.getElementById(id);
    if(elem.style.visibility == 'hidden')
        elem.style.visibility = 'visible';
    else
      elem.style.visibility = 'hidden';  
}
 function toggleBoth()
    {
       toggle('x');
       toggle('y');
    }
​
相关文章：