我想显示 div 代替其他 div

Question

我想用 div2 代替 style.display="none" 的 div1。 当我点击 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>