How to Activate Bootstrap Tab Content with Tab Key

Question

Using Bootstrap 3 Tabs, a user can hit the tab key to change the focus from Nav Tab 1 to Nav Tab 2, etc. However, simply focussing on that Nav Tab does not cause the Tab Content to change. See the examples http://getbootstrap.com/javascript/#tabs-examples

We are building a form where there are inputs in each Nav Tab and then instructions for that input in the Tab Content. Ideally, if a user his the Tab button to navigate from input to input, the Tab Content will change accordingly.

What would we need to do in order for the Tab Content to change along with Tabbing through the navigation?

Thanks!

Here's my navigation code:

<li role="presentation">
                                        <div class="row">


                                            <div class="col-xs-5 col-sm-4" style="padding:0px 5px;">
                                                <p class="sidep">Sternum Notch:</p>
                                            </div>

                                            <div class="col-xs-1 hidden-sm hidden-md hidden-lg" style="padding:0px 0px;">
                                                <a data-toggle="collapse" href="#collapseSternumNotch" aria-expanded="false" aria-controls="collapseSternumNotch" tabindex="-1">
                                                    <i class="fa fa-question-circle"></i>
                                                </a>
                                            </div>
                                            <div class="tablink">
                                            <a href="#section2" aria-controls="section2" role="tab" data-toggle="tab" tabindex="-1" aria-expanded="false">
                                            <div class="col-xs-6 col-sm-8" style="padding:0px 0px;">
                                                <input type="number" class="form-control" name="sternumNotch" placeholder="inches">
                                            </div>
                                            </a>
                                            </div>
                                        </div>


                                        <div class="collapse" id="collapseSternumNotch">
                                            <div class="well">
                                            <div class="embed-responsive embed-responsive-16by9">
                                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pNSZt8AUiw4?rel=0" frameborder="0" allowfullscreen></iframe>
                                            </div>
                                                <h4>Sternum Notch</h4>
                                                <p>In your socks or bare feet, stand with your heels and buttocks against the wall and your feet 8" apart. Find the notch at the top of your ribcage/ bottom of your neck. Measure from the ground to the bottom of the sternum notch.</p>
                                            </div>
                                        </div>

                                    </li>

Here's my Tab Panel Code:

<div role="tabpanel" class="tab-pane" id="section2">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pNSZt8AUiw4?rel=0" frameborder="0" allowfullscreen=""></iframe>
                    </div>
                    <br />
                    <h2>Sternum Notch</h2>
                    <p>In your socks or bare feet, stand with your heels and buttocks against the wall and your feet 8" apart. Find the notch at the top of your ribcage/ bottom of your neck. Measure from the ground to the bottom of the sternum notch.</p>
                  </div>

                </div>
              </div>

And here's my jquery:

$(".tablink input").on("focus", function() {
$(".tablink").closest("a").attr("aria-expanded","true");
});
$(".tablink select").on("focus", function() {
$(".tablink").closest("a").attr("aria-expanded","true");
});

If we assume your index key = 1 it should be $('#myTabs li:eq(1) a').tab('show') — hasan, Aug 03 '17 at 23:05
See similar question: https://stackoverflow.com/questions/17713520/enabling-keyboard-navigation-in-the-bootstrap-dropdown-menu — konyak, Oct 01 '19 at 15:39

score 1 · Answer 1 · answered Aug 04 '17 at 04:41

Here you go with a solution https://jsfiddle.net/vrka7w37/

$('.nav a:first').tab('show');

$('.nav a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Message</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
  </div>

</div>

Tab (keyboard) will help you to move the focus from one bootstrap tab to another bootstrap tab, once you click using Enter it will change the content.

Thanks... How can I make it automatically change the content though without having to hit Enter? — Greg Fielding, Aug 04 '17 at 16:18
@GregFielding Here you go with the solution https://jsfiddle.net/vrka7w37/1/ . Change of tab will change the content. Sorry for replying late. — Shiladitya, Aug 06 '17 at 05:56

score 0 · Answer 2 · answered Aug 04 '17 at 00:34

I don't know exactly what your markup looks like, but I'm pretty sure you could attach a focus event to your inputs. Here's a modified copy of the bootstrap example that would give an idea:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
            <input type="text" class="tabInput" />
        </a>
    </li>
    <li role="presentation">
        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
            <input type="text" class="tabInput" />
        </a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
</div>

Then attach an event listener with jquery:

$('input.tabInput').on('focus', function(event) {
    $(ev.target).closest('a').tab('show');
});

This is likely a little different than your current markup, but I'm sure if you have the inputs in the tabs focusing when the tab-key is pressed, you can adapt this idea to work in your case.

How to Activate Bootstrap Tab Content with Tab Key

2 Answers2