没有锚点的引导选项卡？答案

【问题标题】：Bootstrap tabs without anchors?没有锚点的引导选项卡？
【发布时间】：2016-11-04 20:43:12
【问题描述】：

不知道是否可以在不使用锚元素<a>的情况下编写Bootstrap选项卡？

我想知道的原因是我想在选项卡内添加不是<a> 的有效子级的元素 - 在我的情况下，我想添加一个<input>（注意<input> 不习惯控制标签，就像这样）。

原型选项卡示例可能是：

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>I'm in Section 2.</p>
    </div>
  </div>
</div>

我知道我可以使用以下方法以编程方式显示标签：

$('#tab1').tab('show')

但这似乎取决于它是<a> 的事实。例如，我可以使用<div> 并使用 JQuery 挂钩点击事件吗？

如果我要这样做，我需要一些方法来指定 href。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您可以使用任何其他元素。使用 data-target 代替 href 属性。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><span data-target="#tab1" data-toggle="tab">Section 1</span ></li>
    <li>               <span data-target="#tab2" data-toggle="tab">Section 2</span ></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>I'm in Section 2.</p>
    </div>
  </div>
</div>

不需要自定义 javascript，但您需要设置样式。 jsfiddle 中的示例。

【讨论】：

Bootstrap 选项卡在 a 标签上有样式，所以你不会在这里找到样式，但是数据目标是正确的方法。
@Help 这就是为什么我提到需要自定义样式
先生，我在 angular9 中使用了上面的代码，但是在单击选项卡而不是切换选项卡后整个页面被重新加载
@Kapilsoni 这里没有锚标签。您是否使用任何其他库来包装 Bootstrap 以在 Angular 中使用？
@tmg: 不，先生，我使用了相同的代码，并且我的代码与您在帖子中提到的相同？

【解决方案2】：

我认为你可以这样做

<div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="myTabs" role="tablist">
                <li role="presentation" class="active">  <a href="#home" aria-controls="home" role="tab" data-toggle="tab"> <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""></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">...</div>
                <div role="tabpanel" class="tab-pane" id="profile">...</div>
                <div role="tabpanel" class="tab-pane" id="messages">...</div>
                <div role="tabpanel" class="tab-pane" id="settings">...</div>
            </div>

        </div>


<div id="clickdiv" style="background-color: red;width: 20px;height: 20px"></div>

<script type="text/javascript">
            $("#clickdiv").click(function(){
            //  $('#myTabs a:first').tab('show') // Select first tab
            // $('#myTabs a:last').tab('show') // Select last tab
            $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
        });
    </script>

【讨论】：

问题是那些仍然使用锚来包含标签。

【解决方案3】：

您可以在输入上使用data-target..

<input data-target="#..." data-toggle="tab" class="form-control">

演示：http://www.codeply.com/go/mXUpU5b2x0

【讨论】：

当我添加输入时，输入不控制选项卡......我会澄清这个问题。