2013-12-09 45 views
0

我需要在英文measure中顯示一個包含維度和權重的DIV,並且有一個鏈接允許用戶切換到隱藏的DIV,而不是顯示度量。嘗試下面的標記,但它不起作用。它拒絕切換。我已經用第一個div給出了沒有樣式和樣式「」顯示:塊;「的測試。並且都不起作用。我錯過了什麼?需要切換2 DIV的DIV可見性

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <style type="text/css"> 
    <!-- 
    body { 
     color:#000000; 
     background-color:#FFFFFF; 
    } 
    a { color:#0000FF; } 
    a:visited { color:#800080; } 
    a:hover { color:#008000; } 
    a:active { color:#FF0000; } 
    --> 
    </style> 
    <!--[if IE]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <script type="text/javascript"> 
    function toggle_visibility(eng, met) { 
     var e1 = document.getElementById(eng); 
     var e2 = document.getElementById(met); 
     if(e1.style.display == 'block') 
      e1.style.display = 'none'; 
      e2.style.display = 'block'; 
     else 
      e1.style.display = 'block'; 
      e2.style.display = 'none'; 
    } 
    </script> 
    </head> 
    <body> 
    <div id="eng" style="display: block;"> 
     This is English<br /> 
     <a href="#" onclick="toggle_visibility('eng','met');">Convert to Metric</a> 
    </div> 
    <div id="met" style="display: none;"> 
     This is Metric<br /> 
     <a href="#" onclick="toggle_visibility('met','eng');">Convert to English</a> 
    </div> 
    </body> 
</html> 
+0

是的,那些如果聲明需要大括號。有人在Visual Basic中編碼? ;) – RealityDysfunction

回答

2

試試這個if語句:

if(e1.style.display == 'block') { 
     e1.style.display = 'none'; 
     e2.style.display = 'block'; 
    } else { 
     e1.style.display = 'block'; 
     e2.style.display = 'none'; 
    } 
+0

沒有。仍然保持凍結在最初的DIV。 –

+0

不,它的工作,看看這裏:http://jsfiddle.net/NTN6f/ –

0

得到它的工作。我想我會發布解決方案:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <style type="text/css"> 
    <!-- 
    body { 
     color:#000000; 
     background-color:#FFFFFF; 
    } 
    a { color:#0000FF; } 
    a:visited { color:#800080; } 
    a:hover { color:#008000; } 
    a:active { color:#FF0000; } 
    --> 
    </style> 
    <!--[if IE]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <script type="text/javascript"> 
    function toggle_visibility() { 
     var e1 = document.getElementById("eng"); 
     var e2 = document.getElementById("met"); 
     if(e1.style.display == 'block') { 
     e1.style.display = 'none'; 
     e2.style.display = 'block'; 
     } 
     else { 
     e1.style.display = 'block'; 
     e2.style.display = 'none'; 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <div id="eng" style="display: block;"> 
     This is English<br /> 
     <a href="#" onclick="toggle_visibility();">Convert to Metric</a> 
    </div> 
    <div id="met" style="display: none;"> 
     This is Metric<br /> 
     <a href="#" onclick="toggle_visibility();">Convert to English</a> 
    </div> 
    </body> 
</html>