我想顯示div來代替其他div

Question

我想顯示div2替換div1 style.display =「none」。 當我點擊retaurants td它將取代div1與div 2 然後顯示div 2代替div1。

HTML：

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0"> 
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00"> 
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 

     <h1><span style="background-color:#999999"> Stay </span></h1> 
    </td> 

    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
     <h1>Restaurants </h1> 
    </td> 
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
     <h1> Things to do </h1> 
    </td> 
     <!--shopping btn column --> 
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
     <h1> Shopping </h1> 

    </td> 
</tr> 




    <tr> 
    <div id="div1"> 
     <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
     <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
      You Wanna Go? </text> 
     <form class="demo"> 
      <div class="dropdownstay" 

      </div> 

      </form> 
     </td> 
     </div> 
    </tr> 


    <tr> 
    <div id="div2" style="display:none;> 
     <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
     <text style="font-size:20px; font-family:Monotype Corsiva;"> What 
      You Wanna eat? </text> 
      <form class="demo"> 
      <div class="dropdownstay" 

      </div> 

     </form> 
     </td> 
    </div> 
    </tr> 
    </table> 
    </div> 

的javascript：

<script type="text/javascript"> 
function dd(id) { 
if(id=='id2') 
    { 

     var ele = document.getElementById("div2"); 
     if(ele.style.display == "none") 

     { 

     ele.style.display = "block"; 

     } 

    } 
    } 

</script> 

我的代碼被表示DIV2但DIV1上方。我想展示我的div2來代替div1。 在此先感謝。

Answer 1

我想你應該嘗試這樣的事：

首先刪除您DIV2

的JavaScript：

var ele = document.getElementById("div1"); 
if(ele.style.display == "none") { 
    ele.style.innerHTML= ' 
    <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
    <text style="font-size:20px; font-family:Monotype Corsiva;"> 
     What You Wanna eat? 
    </text> 
    <form class="demo"> 
     <div class="dropdownstay"> 
     </div> 
    </form> 
    </td>'; 

} 

在這裏，你有這個想法，但你可以優化這一點，因爲，在你的HTML有類似的代碼，所以你可以通過分解它來重用它。我認爲你應該只更換內容。 （你真正的問題是，你使用div標籤來包裝標籤，所以你可以保持你的第一個想法與內聯樣式修改和刪除無用）。

工作例如：

function dd(id) { 
 
if(id=='id2'){ 
 
var ele = document.getElementById("div1"); 
 
    ele.innerHTML= 
 
    '<td width="550" height="200" colspan="4" bgcolor="e0e722">'+ 
 
    '<text style="font-size:20px; font-family:Monotype Corsiva;"> '+ 
 
     'What You Wanna eat?'+ 
 
    '</text>'+ 
 
    '<form class="demo">'+ 
 
     '<div class="dropdownstay">'+ 
 
     '</div>'+ 
 
    '</form>'+ 
 
    '</td>'; 
 

 
} 
 
}

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0"> 
 
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00"> 
 
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 
 

 
     <h1><span style="background-color:#999999"> Stay </span></h1> 
 
    </td> 
 

 
    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1>Restaurants </h1> 
 
    </td> 
 
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1> Things to do </h1> 
 
    </td> 
 
     <!--shopping btn column --> 
 
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1> Shopping </h1> 
 

 
    </td> 
 
</tr> 
 

 
    <tr id="div1"> 
 
     <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
 
     <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
 
      You Wanna Go? </text> 
 
     <form class="demo"> 
 
      <div class="dropdownstay" 
 

 
      </div> 
 

 
      </form> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    </div>

編輯

下面是使用內嵌式的解決方案：

function dd(id) { 
 
if(id=='id2'){ 
 
     var tr1 = document.getElementById("tr1"); 
 
     var tr2 = document.getElementById("tr2"); 
 
     if(tr2.style.display == "none"){ 
 
     tr2.style.display = "block"; 
 
     tr1.style.display = "none"; 
 
     } 
 
    } 
 
}  
 

 

 

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0"> 
 
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00"> 
 
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 
 

 
     <h1><span style="background-color:#999999"> Stay </span></h1> 
 
    </td> 
 

 
    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1>Restaurants </h1> 
 
    </td> 
 
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1> Things to do </h1> 
 
    </td> 
 
     <!--shopping btn column --> 
 
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)"> 
 
     <h1> Shopping </h1> 
 

 
    </td> 
 
</tr> 
 

 

 

 

 
    <tr id="tr1"> 
 
     <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
 
     <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
 
      You Wanna Go? </text> 
 
     <form class="demo"> 
 
      <div class="dropdownstay"> 
 
      </div> 
 

 
      </form> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr id="tr2" style="display:none"> 
 
     <td width="550" height="200" colspan="4" bgcolor="e0e722"> 
 
     <text style="font-size:20px; font-family:Monotype Corsiva;"> What 
 
      You Wanna eat? </text> 
 
      <form class="demo"> 
 
      <div class="dropdownstay"> 
 
      </div> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
    </table>