1

i implement the following custom view 

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" data-target="tab1">Section 1</a></li>
        <li><a data-toggle="tab" data-target="tab2">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>Howdy, I'm in Section 2.</p>
        </div>
    </div>
</div>

<script>
    $( function() {
        $('.nav-tabs a').click(function(){
            console.log(this);
            $(this).tab('show');
        });
    } );
</script>

The tabs are showing correctly but when i click tab2 the tab is not changing to content of of tab2. Console.log is shown. Any help please ?

allicarn
  • 2,859
  • 2
  • 28
  • 47
user1292656
  • 2,502
  • 20
  • 48
  • 68

1 Answers1

0

The IDs provided in data-target are missing a leading # each. Values of the data-target attribute are parsed as jquery selectors.

<li class="active"><a data-toggle="tab" data-target="#tab1">Section 1</a></li>
<li><a data-toggle="tab" data-target="#tab2">Section 2</a></li>
Star
  • 3,222
  • 5
  • 32
  • 48
Jay
  • 3,640
  • 12
  • 17