Implement Bootstrap active tabs with turbo-frames?

Given a page with separate turbo-frames, one for a Bootstrap tab menu and the other for some content:

page.html.erb:

<body>
...
<div class="row">
  <turbo-frame id="nav">
    <%= render 'tabs' %>
  </turbo-frame>
</div>

<div class="row">
  <turbo-frame id="content" src="/content">
  </turbo-frame>
</div>
...
</body>

tabs.html.erb:

<turbo-frame id="holdings-nav">
  <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="<%= content_1_path %>" data-turbo-frame="content">Content X</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="<%= content_2_path %>" data-turbo-frame="content">Content Y</a>
  </li>
</ul>
</turbo-frame>

This works great; clicking on either link in the tabbed nav bar displays the appropriate content page in the appropriate location via Turbo.

My question is now, what is the recommended way to change active CSS class on the tab bar when clicking the link using Turbo frames? Should I wrap the Turbo frames in page.html.erb in another Turbo frame, then have the nav links target that frame?

Or is it just easier to use a bit of Javascript linked to the onClick handler?

Surely someone has sorted this out? Thanks!!

2 Likes