javascript - 使用 javascript 切换表单可见性

Question

我使用此代码根据用户选择的链接在我的页面上显示多个表单:

<ul class="nav">
   <li><a href="#" onclick="$('#more_info').toggle(); return false;">
      More Information</a>
   </li>
   <li><a href="#" onclick="$('#road_test').toggle(); return false;">
      Book a Road Test</a>
   </li>
   <li><a href="#" onclick="$('#quote').toggle(); return false;">
      Request a Quote</a>
   </li>
   <li><a href="#" onclick="$('#offer').toggle(); return false;">
      Make an Offer</a>
   </li>
   <li><a href="#" onclick="$('#contact').toggle(); return false;">
      General Contact</a>
   </li>
</ul>

代码工作正常，我遇到的唯一问题是，如果我选择一种形式然后选择另一种形式，则先前选择的形式仍然存在。如果我选择“更多信息”然后“提出报价”，我将收到两种表格，而不仅仅是“提出报价”。我该如何解决这个问题？

Answer 1

您可以存储当前显示的表单

var curForm;
function showForm(formId){
    if (curForm != null) curForm.hide();
    curForm = $(formId);
    curForm.show();
}

然后在你的html中

<ul class="nav">
   <li><a href="#" onclick="showForm('#more_info'); return false;">
      More Information</a>
   </li>
   <li><a href="#" onclick="showForm('#road_test'); return false;">
      Book a Road Test</a>
   </li>
   <li><a href="#" onclick="showForm('#quote');return false;">
      Request a Quote</a>
   </li>
   <li><a href="#" onclick="showForm('#offer'); return false;">
      Make an Offer</a>
   </li>
   <li><a href="#" onclick="showForm('#contact'); return false;">
      General Contact</a>
   </li>
</ul>