Question

使用Bootstrap 3选项卡，用户可以按Tab键将焦点从导航选项卡1更改为导航选项卡2等。但是，仅关注该导航选项卡不会导致选项卡内容发生更改。请参阅示例http://getbootstrap.com/javascript/#tabs-examples

我们正在构建一个表单，其中每个Nav选项卡中都有输入，然后是Tab选项卡中的输入说明。理想情况下，如果用户使用Tab键从输入导航到输入，则Tab内容将相应更改。

我们需要做些什么才能让Tab内容随着Tabbing一起改变导航？

谢谢！

这是我的导航代码：

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

这是我的选项卡面板代码：

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

这是我的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");
});

Answer 1

我不确切地知道您的标记是什么样的，但我很确定您可以在输入中附加focus事件。这是一个修改后的bootstrap示例副本，可以提供一个想法：

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

然后使用jquery附加一个事件监听器：

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

这可能与您当前的标记略有不同，但我确定如果按下标签键时标签中的输入是否对焦，您可以根据您的情况调整此设置。< / p>

Answer 2

您可以使用解决方案https://jsfiddle.net/vrka7w37/

＆＃13;

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

＆＃13;

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

＆＃13;

Tab（键盘）将帮助您将焦点从一个引导标签移至另一个引导标签，一旦您点击Enter即可更改内容。

如何使用Tab键激活Bootstrap选项卡内容

2 个答案: