Question

我想显示div2替换div1，其中style.display =＆＃34; none＆＃34;。当我点击重拍器td时，它将用div 2替换div1 然后显示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>

我想用div来代替另一个div

1 个答案: