在使用javascript函數之後html中的元素位置發生變化

我有一個代碼，我將一次顯示三個以上的圖形。我已經使用div標籤和表格來分隔每個圖形，並將所有內容顯示在另一個之下。但是，當我嘗試使用JavaScript函數來查看一張圖並隱藏其餘圖。圖形的位置發生變化。該圖將以不完整的方式顯示。它通常表現在以下方式：http://i47.tinypic.com/or1d91.png 但是當我使用JavaScript函數，因爲它正在顯示：http://i48.tinypic.com/345zkeq.png 在使用javascript函數之後html中的元素位置發生變化

我包括下面的代碼爲JavaScript和HTML部分：

<script> 
    hideAllDivs = function() { 
    $("#uae").hide(); 
    $("#ksa").hide(); 
    $("#iran").hide(); 
    }; 

handleNewSelection = function() { 

hideAllDivs(); 

switch ($(this).val()) { 
    case '1': 
     $("#ksa").show(); 
    break; 
    case '2': 
     $("#uae").show(); 
    break; 
    case '3': 
     $("#iran").show(); 
    break; 
} 
}; 

$(document).ready(function() { 

$("#view").change(handleNewSelection); 

// Run the event handler once now to ensure everything is as it should be 
handleNewSelection.apply($("#view")); 

}); 
</script> 
</head> 
<body> 
<table align="center"><tr><td><select id="view"> 
<option value="">Overall</option> 
<option value="1">KSA</option> 
<option value="2">UAE</option> 
<option value="3">IRAN</option> 
</select> 
</td></tr></table> 
<div id="country"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container5" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Country</th><th>Risk Score</th><?php  foreach($names4 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="ksa"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names1 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="uae"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names2 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="iran"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names3 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
</body> 
</html>

來源

2013-03-03 user2038580

我相信你問題是在表格中的div，div =容器5，div容器2，div contaier 3等等。您給表格的寬度爲800px，然後在其中放置一個div，它可以給出400 px; ，這是100％非JavaScript的，它是計算的css

來源

2013-03-03 05:18:01

非常感謝好友:) – user2038580 2013-03-03 05:36:01

沒問題高興我可以幫一次：P – 2013-03-04 06:11:56

在使用javascript函數之後html中的元素位置發生變化

回答

相關問題