1

I'm just starting to gain a little experience with Foundation 5. I'm trying to implement a form "wizard" using vertical tabs so users can page their way through sections of a form by clicking on corresponding tabs. It works for each of the tabs that points to on-page content. But for one of my tabs, I'd like the link to point to a different page than the one containing the vertical tab content. I insert the correct url in the href for the 'a' within the 'dd' of the tab, and rolling over the tab I'm shown the correct link url in my browser, but clicking doesn't take me to the new page, it just leaves me where I am on the form.

Is there a way to make this work, or can the tab hrefs only successfully point to "#something" instead of "/users/edit"?

In the code snippet below, the link that is supposed to point off-page is the '/users/edit' link.

<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 %>

Update

I noticed in another SO question that this can be made to work for all tabs by removing the "data-tab" option in the main dl tag for the set of tabs. But since I only want to have this happen for one of my five tabs, that option doesn't appear to be open to me.

Thanks,

Dean

Dean Richardson
  • 121
  • 1
  • 2
  • 3

1 Answers1

0

Please visit this stackoverflow question if you want to learn how to make a J$ link.
I believe this route is your best-bet to "force" something to link. Don't forget to add
CSS cursor: pointer; to your :hover class.

Community
  • 1
  • 1
Uncle Iroh
  • 376
  • 5
  • 17