Question

我刚刚开始使用Foundation 5获得一点经验。我正在尝试使用垂直标签实现表单“向导”，以便用户可以通过单击相应的选项卡来浏览表单的各个部分。它适用于指向页面内容的每个选项卡。但是对于我的一个标签，我希望链接指向与包含垂直标签内容的页面不同的页面。我在选项卡的'dd'中为'a'插入了正确的URL，并在选项卡上滚动我在浏览器中显示了正确的链接URL，但点击不会将我带到新页面，它只是让我离开我在表格上的位置。

有没有办法让这个工作，或者标签hrefs只能成功指向“#something”而不是“/ users / edit”？

在下面的代码段中，应该指向离页的链接是“/ users / edit”链接。

<dl class="tabs vertical" data-tab data-options="deep_linking:true scroll_to_content:false">
    <dd class="account_edit">
      <a href="/users/edit" class="account_section_tab">Registration Info</a>
    </dd>
    <dd class="active account_edit">
      <a href="#billing_address" class="account_section_tab">Billing Address</a>
    </dd>
    <dd class="account_edit">
      <a href="#contact_info" class="account_section_tab">Contact Info</a>
    </dd>
    <dd class="account_edit">
      <a href="#payout_settings" class="account_section_tab">Payout Settings</a>
    </dd>
    <dd class="account_edit">
      <a href="#notifications" class="account_section_tab">Notifications</a>
    </dd>
  </dl>
  <%= simple_form_for(@account, url: user_account_path(current_user), html: { method: :put }) do |f| %>
    <div class="tabs-content vertical">
      <%= render :partial => 'users/accounts/billing_address', :locals => { :f => f } %>
      <%= render :partial => 'users/accounts/contact_info', :locals => { :f => f } %>
      <%= render :partial => 'users/accounts/payout_settings', :locals => { :f => f } %>
      <%= render :partial => 'users/accounts/notifications', :locals => { :f => f } %>
    </div> 
  <% end %>

更新

我在另一个SO问题中注意到，通过删除主标签集的主dl标签中的“data-tab”选项，可以使其适用于所有标签。但是因为我只希望在我的五个标签之一中发生这种情况，所以该选项似乎对我不公开。

谢谢，

迪安

Answer 1

如果您想了解如何制作J $链接，请visit this stackoverflow question 我相信这条路线是你最好的“强迫”某些东西来联系。不要忘记将CSS cursor: pointer;添加到:hover课程。

alternative w3schools tutorial

Zurb Foundation 5垂直标签，一个链接指向页外

1 个答案: