Bootstrap选项卡没有锚？(Bootstrap tabs without anchors?)

我想知道是否可以在不使用锚元素<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钩入click事件？

我需要某种方式来指定href如果我这样做。

I wonder whether it is possible to write Bootstrap tabs without using anchor elements <a>?

The reason I want to know is that I want to add elements inside the tab that are not valid children of <a> - in my case I want to add an <input> (note the <input> is not used to control the tabs, as such).

An archetype tab example may be:

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

I know I can make tabs show programmatically using:

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

But that appears to depend on the fact that it's an <a>. Could I use a <div>, for example, and hook into the click event with JQuery?

I would need some way to specify the href if I were to do it that way.

最满意答案

您可以使用任何其他元素。使用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中的示例。

You can use any other element. Instead of href attribute, use 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>

No need for custom javascript, but you need to style. Example in jsfiddle.

更多推荐