javascript - Bootstrap tabs without anchors? - Stack Overflow

admin管理员组

文章数量:1287913

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.

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.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Sep 27, 2016 at 13:23 Dan Gravell asked Sep 27, 2016 at 12:26 Dan GravellDan Gravell 8,23077 gold badges4646 silver badges6969 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 23

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.

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>

You can use data-target on the inputs..

<input data-target="#..." data-toggle="tab" class="form-control">

Demo: http://www.codeply.com/go/mXUpU5b2x0

本文标签： javascriptBootstrap tabs without anchorsStack Overflow