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

Posted 2023-05-08

【中文标题】如何使用 Tab 键激活引导选项卡内容

【英文标题】：How to Activate Bootstrap Tab Content with Tab Key

【发布时间】：2018-01-11 17:41:23

【问题描述】：

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

我们正在构建一个表单，其中每个导航选项卡中都有输入，然后在选项卡内容中为该输入提供说明。理想情况下，如果用户使用 Tab 按钮从一个输入导航到另一个输入，那么 Tab Content 会相应地改变。

我们需要做什么才能让 Tab Content 与通过导航的 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");
);

【问题讨论】：

如果我们假设你的索引键 = 1 它应该是 $('#myTabs li:eq(1) a').tab('show')

查看类似问题：***.com/questions/17713520/…

【参考方案1】：

这里有一个解决方案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（键盘）将帮助您将焦点从一个引导选项卡移动到另一个引导选项卡，一旦您点击使用Enter 会改变内容。

【讨论】：

谢谢...我怎样才能让它自动更改内容而无需按 Enter 键？

@GregFielding 解决方案在这里 jsfiddle.net/vrka7w37/1 。更改选项卡将更改内容。抱歉回复晚了。

【参考方案2】：

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

<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');
);

这可能与您当前的标记略有不同，但我敢肯定，如果您在按下 tab 键时在选项卡中输入焦点，您可以调整这个想法以适应您的情况。