Dan Gravell Dan Gravell - 2 months ago 30
HTML Question

Bootstrap tabs without anchors?

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.

tmg tmg
Answer

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