在切換div之間的可見性時遇到問題

-2

我需要這個工作，並且我沒有想法。我不能使用jQuery，它需要是純粹的JavaScript/CSS。這有什麼問題？在切換div之間的可見性時遇到問題

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
<div id="id1"><p>test 1</p></div> 
<div id="id2" style="display: none"><p>test 2</p></div> 

function toggle_visibility(id1, id2) { 
var e = document.getElementById(id1); 
var e2 = document.getElementById(id2); 
if(e2.style.display == 'block') {     
    e.style.display = 'block';    
    e2.style.display = 'none'; 
} 
else { 
    e.style.display = 'none';    
    e2.style.display = 'block'; 
}    
}

來源

2013-10-03 Arringar1

我說...什麼都沒有 - > http://jsfiddle.net/Eeam8/ – adeneo

呀，代碼工作。 – Orlando

只要您的CSS默認不覆蓋'div'作爲塊元素，此代碼應該工作。 –

它的工作原理！我試圖在我的瀏覽器

<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
     <div id="id1"><p>test 1</p></div> 
     <div id="id2" style="display: none"><p>test 2</p></div> 

     <script type="text/javascript"> 
      function toggle_visibility(id1, id2) { 
       var e = document.getElementById(id1); 
       var e2 = document.getElementById(id2); 
       if(e2.style.display == 'block') {     
        e.style.display = 'block';    
        e2.style.display = 'none'; 
       } 
       else { 
        e.style.display = 'none';    
        e2.style.display = 'block'; 
       }    
      } 
     </script> 
    </body> 
</html>

來源

2013-10-03 19:01:29

您的代碼示例唯一錯誤的是您沒有將您的JavaScript包含在<script>標記中。

例子：

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
<div id="id1"><p>test 1</p></div> 
<div id="id2" style="display: none"><p>test 2</p></div> 

<script type="text/javascript"> 
    function toggle_visibility(id1, id2) { 
     var e = document.getElementById(id1); 
     var e2 = document.getElementById(id2); 
     if(e2.style.display == 'block') {     
      e.style.display = 'block';    
      e2.style.display = 'none'; 
     } 
     else { 
      e.style.display = 'none';    
      e2.style.display = 'block'; 
     }    
    } 
</script>

來源

2013-10-03 18:47:25 jrthib

這是，我只是沒有粘貼在這裏。 – Arringar1

@ Arringar1 - 你見過阿德內奧的小提琴嗎？你是否在控制檯中發生錯誤？ – j08691

內聯樣式是壞的形式，而不是語義正確。這應該與CSS類更改完成：

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
<div id="id1" class="ClassThatShows"><p>test 1</p></div> 
<div id="id2" class="ClassThatHides"><p>test 2</p></div> 

<script type="text/javascript"> 
function toggle_visibility(hideMe, showMe) { 
    document.getElementById(hideMe).className = "ClassThatHides"; 
    document.getElementById(showMe).className = "ClassThatShows"; 
} 
</script>

來源

2013-10-03 18:59:35 MBielski

在切換div之間的可見性時遇到問題

回答

相關問題