Question

我想在按钮点击时用其他div替换div。我见过show / hide div的例子。但是使用这个，第二个div首先显示在下面，但它显示在下一行。我想不仅隐藏div而是替换或显示相同位置的div。我的代码是：

    <script language="javascript" type="text/javascript">
      function toggleDiv(Flag) 
                  {
                      if (Flag == 'one')
                         {
                             document.getElementById("one").style.visibility = "visible";
                             document.getElementById("two").style.visibility = "hidden";
                             document.getElementById("three").style.visibility = "hidden";
                             document.getElementById("four").style.visibility = "hidden";

                         } 


                        else if (Flag == 'two')
                       {
                           document.getElementById("two").style.visibility = "visible";
                          document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "hidden";
                       }
                       else if (Flag == 'three')
                        {
                           document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "visible";
                           document.getElementById("four").style.visibility = "hidden";
                       }
                       else if (Flag =='four')
                       {
                           document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "visible";
                       }
                       else {
                           document.getElementById("one").style.visibility = "visible";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "hidden";

                       }
                    } 
 </script>

    <center>
<div id="one" style= " visibility:visible">
//some code
</div>
<div id="two" style= " visibility:hidden">
//some code
</div>        
<div id="three" style= " visibility:hidden">
//some code
</div> 
<div id="four" style= " visibility:hidden">
//some code
</div> 
</center>

这段代码完美无缺，但正如我所说它在下一行显示每个div我希望它在同一条线上。任何帮助??

Answer 1

使用css并在div类中添加属性I.e position：absolute;

如何在按钮点击时用其他div替换div

1 个答案: