没有锚点的Bootstrap标签？

Question

我想知道是否可以在不使用锚元素的情况下编写Bootstrap标签<a>？

我想知道的原因是我想在选项卡中添加不是有效子元素的元素<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挂钩click事件吗？

我需要一些方法来指定href我是否这样做.

Answer 1

您可以使用任何其他元素.而不是href属性,使用data-target.

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