Question

<html>
<body>
<section>
  <div>
    <section class="upper">
      <ul>
        <li>
          <a href="#">Menu
            <ul>
              <li><a href="#" id="button1" class="button1">Button1</a>
              <li><a href="#" id="button2" class="button2">Button2</a>
              <li><a href="#" id="button3" class="button3">Button3</a>
            </ul>            
          </a>
        </li>
      </ul>
    </section>
    </div>
    <div>
    <section class="lower"> 
    <div class="loadForm" id = "loadForm">
    </div>
    </section>
  </div>
</section>

<form action="#" id="form_1" method="post" name="form_1" style="display:none">
  <div class="nameDiv"  style="alignment-adjust:auto; margin-left:auto; margin-top:auto">
	  <div id="infoPopup">
			<span>Select Name</span>
		  	<input id="nameFile" name="nameFile" type="file">
  			<input type="button" id="submit" name="submit" value="Ok"/>	
	  		<input type="button" id="cancel" name="cancel" value="Cancel" />		
		</div>&nbsp;
	</div>
 </form>
 
 <script type="text/javascript">
  $(document).ready(function(){
  /*
    $("#button1").click(function() {
            $("#form_1").show();
        }); */
  });
 </script>
 </body>
 </html>

我已经在其他上面创建了2个部分，并希望在下部（部分划分）中加载不同的表单，这取决于使用JS从上面部分的按钮（单击）现在，我只为1添加片段，但我需要加载form_1，form_2等按钮按钮单击按钮1，按钮2等等。

Answer 1

没有代码，不能帮助太多，但一般流程是您可以为不同的按钮分配onclick事件并将表单的样式设置为：

display:none;

onclick函数应该类似于

//remember to set the form id for this to work
function foo(){
    document.getElementById("form id here").style.display = "block";
    //if you need to show only one then use set the other one to none
    document.getElementById("the other form id here").style.display = "none";
}

使用此方法，您需要为2个按钮提供2种不同的功能。

Answer 2

试试这个。

＆＃13;

<html>
<body>
<section>
  <div>
    <section class="upper">
      <ul>
        <li>
          <a href="#">Menu
            <ul>
              <li><a href="#" id="button1" class="button1" onclick="displayform1()">Button1</a>
              <li><a href="#" id="button2" class="button2" onclick="displayform2()">Button2</a>
              <li><a href="#" id="button3" class="button3" onclick="displayform3()">Button3</a>
            </ul>            
          </a>
        </li>
      </ul>
    </section>
    </div>
    <div>
    <section class="lower"> 
    <div class="loadForm" id = "loadForm">
    </div>
    </section>
  </div>
</section>

<form action="#" id="form_1" method="post" name="form_1" style="display:none">
  <div class="nameDiv"  style="alignment-adjust:auto; margin-left:auto; margin-top:auto">
	  <div id="infoPopup">
			<span>Select Name</span>
		  	<input id="nameFile" name="nameFile" type="file">
  			<input type="button" id="submit" name="submit" value="Ok"/>	
	  		<input type="button" id="cancel" name="cancel" value="Cancel" />		
		</div>&nbsp;
	</div>
 </form>
 
 <script type="text/javascript">
 function displayform1(){
     document.getElementById("form_1").style.display = "block";
     document.getElementById("form_2").style.display = "none";
 }
 function displayform2(){
     document.getElementById("form_1").style.display = "none";
     document.getElementById("form_2").style.display = "block";
 }
 //excluded the 3rd one
 </script>
 </body>
 </html>

＆＃13;

如何使用HTML / JS在按钮单击时在<div>中加载表单

2 个答案: