Javascript 切换HTML元素

我错过了什么使它切换？切换第二个帐户似乎合乎逻辑，但它只切换一次

function ShowHide()
        {
           var right_e = document.getElementById('id1'); 
           var left_e = document.getElementById('id2'); 
           if (top.visible_id == 'right') {
               right_e.style.display = 'none'; 
               left_e.style.display = 'block'; 
               top.visible_id = 'left';
           } else {
               right_e.style.display = 'block'; 
               left_e.style.display = 'none'; 
               top.visible_id = 'right';
           }    
        }


<a onclick ="javascript:ShowHide()" href="javascript:;" >click here</a>

函数ShowHide（）
{
var right_e=document.getElementById（'id1'）；
var left_e=document.getElementById（'id2'）；
if（top.visible_id=='right'）{
右_e.style.display='none'；
left_e.style.display='block'；
top.visible_id='左'；
}否则{
右_e.style.display='block'；
left_e.style.display='none'；
top.visible_id='right'；
}    
}

我不知道什么是

top

，但您不需要在示例中使用它。只需检查哪个div可见：

function ShowHide()
    {
       var right_e = document.getElementById('id1'); 
       var left_e = document.getElementById('id2'); 
       if (right_e.style.display === 'block') {
           right_e.style.display = 'none'; 
           left_e.style.display = 'block'; 
       } else {
           right_e.style.display = 'block'; 
           left_e.style.display = 'none'; 
       }    
    }

---

我认为你为if和else创造了同样的条件：

top.visible_id = 'right';

---

如果您所要做的只是关闭每个元素的可见性，并且其中一个元素最初是隐藏的，而另一个元素最初是显示的，请尝试使用jQuery的

---

什么是

顶部可见的\u id

？

top

在哪里声明？为什么不直接使用jQuery？这会更简单。您实际上可以使用jQuery“toggle（）”effect@Charlie-。这可能有一个jQuery插件。@vol7ron-谢谢。我忘了这些可以合并。我已经相应地更新了答案。没有说它必须替换它，只是提供了它作为替代，如果我想走jQuery路线，我会检查[jsperf]（jsperf.com）看看什么更快。此外，由于您已将它们组合到一行中，因此他可以真正摆脱

ShowHide

function@vol7ron-这是真的。我猜我是因为使用jQuery而被否决的。不管是谁，我想你建议改为使用：

？不确定是谁投票否决了你，但不，不要在HTML中包含JS。

$（…）

可以在JS中应用于onDomReady。我建议给锚定一个id/类并执行

$（'#linkID'）。单击（function（）{/*toggle code*/}）我想问题是‘我缺少什么来让它切换？’。
function ShowHide()
{

   if (document.getElementById('id1').style.display == 'block') {
       document.getElementById('id1').style.display = 'none'; 
       document.getElementById('id2').style.display = 'block'; 
   } else {
       document.getElementById('id1').style.display = 'block'; 
       document.getElementById('id2').style.display = 'none'; 
   }       
}

function ShowHide() {
  $('#id1,#id2').toggle();
}