我们如何通过单击Rails显示不同的表单部分

Question

我有一个局部导航栏渲染。

例如：仪表板/菜单

在导航栏中，我有一个链接，如导师，公司。

单击这些链接时，它将呈现不同的表单部分。

例如：

_menu.html.erb

<a id="mentor" href="dasboard/settings">mentor</a>
<a id="corporate" href="dasboard/settings">corporate</a>

在设置页面中：设置页面中的指导者和公司表单。

<div id="men">
<% form_for() %>
  #mentor fields
<% end %>
</div>

<div id="cor">
<% form_for() %>
  #corporate fields
<% end %>
</div>

jQuery和CSS在设置页面：

#men,#cor{
 display: none;
}
$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

但是，当我单击导航栏链接时，正在发生。 即使我没有任何错误。

更新：

我在设置页面中放置了导航链接。 它的工作正常。

但是，从菜单部分来看，它不起作用。

Answer 1

您的选择不正确，jquery脚本中有两个错误

1. 您选择不正确。 这个选择$("men")将不选择任何东西，因为选择不会men ，直到你加# 。
2. css({"display: block"})这也是在任何元素上添加css的错误方法

尝试跟随

$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

Answer 2

解决方案的正确代码是

$("#mentor").on("click", function(event){
  event.preventDefault();
  $("#men").css("display", "block");
});

$("#corporate").on("click", function(event){
  event.preventDefault();
  $("#cor").css("display", "block");
});

这是JSbin示例

注意：我添加了event.preventDefault（）来防止链接将请求发送到服务器，从而仅呈现已加载的代码。 如果要通过从服务器提取数据来呈现表单，则可以使用远程链接。