CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
user7262544
user7262544

Reputation:

How to create a working button to navigate Bootstrap tabs?

I'm trying to enhance UX by creating a button to navigate bootstrap tabs. I've tried to trick the browser into replacing the click on the button by the a click on the navigation tab. It works in browser ( although it doesn't in jsfiddle below) and as soon it reaches the second tab, the browser kind of refresh and goes back to the first tab. Would you kindly help me to stop that from happening? Thanks in advance

<ul class="nav nav-tabs" id="myTab">
          <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
          <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
          <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
          <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="home">Home
    <br>
     <div id="avc1"><button class="btn btn-success">Avançar<span class="glyphicon glyphicon-chevron-right"></span></button></div>
    </div>
          <div class="tab-pane" id="profile">Profile</div>
          <div class="tab-pane" id="messages">Message</div>
          <div class="tab-pane" id="settings">Settings</div>
        </div>

Jquery's exerpt

$( "#avc1" ).click(function() {
  $( "#profile" ).click();

});

http://jsfiddle.net/vitordhers/ocz2umz2/1/

Upvotes: 0

Views: 982

Answers (1)

Sankalp Singha
Sankalp Singha

Reputation: 4546

This is not the correct way to show the tabs. According to the bootstrap tab's documentation.

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

You can activate individual tabs in several ways:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#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)

Upvotes: 2

Related Questions