Bootstrap tabs without anchors?

Question

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.

Answer 1

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.

Answer 2

I think you can do something like this

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