javascript - 没有 anchor 的 Bootstrap 选项卡？

Question

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

我想知道的原因是我想在选项卡内添加不是 <a> 的有效子元素的元素- 在我的例子中，我想添加一个 <input> (注意 <input> 不用于控制选项卡，因此)。

原型(prototype)选项卡示例可能是:

<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如果我那样做的话。

Answer 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 中的示例.