Kannan Sivam February 2016

How to make a nav tab active from outside with a button?

<ul class="nav nav-tabs piluku-tabs " role="tablist">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Personal Detail</a>

    </li>
    <li role="presentation">

        <a href="#join" aria-controls="join" role="tab" data-toggle="tab">Joining Detail</a>
    </li>
    <li role="presentation">

        <a href="#education" aria-controls="education" role="tab" data-toggle="tab" id ="id2">Education Detail</a>
    </li>
    <li role="presentation">

        <a href="#experience" aria-controls="education" role="tab" data-toggle="tab">Experience Detail</a>
    </li>
</ul>

<a href="#join" aria-controls="join" role="tab" data-toggle="tab"><button type="button" class="btn btn-primary clickme">Next</button></a>

I am using a next button to move next tab. The tab is changing, but active stands only in first tab of the nav tab. How to change the active from first to selected tab?

Answers


Praveen Kumar February 2016

Fire event on button click like this

$('.clickme').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

Post Status

Asked in February 2016
Viewed 1,203 times
Voted 12
Answered 1 times

Search




Leave an answer