1

Hi i am creating tab using bootstrap. i know this question asked before many of time but my tab code is bit different i am using button to go on next tab here is my jquery code 

 $(document).ready(function () {


      $(".btn_1").click(function (e) {
        e.preventDefault();
        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
     //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });


});


function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}

Tab code

<ul class="nav nav-wizard">

                    <li class="active">
                        <a href="#step1" data-toggle="tab">Location Information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step2" data-toggle="tab">Contact Information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step3" data-toggle="tab">Other information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step4" data-toggle="tab">Business Keywords</a>
                    </li>
                    <li class="disabled">
                        <a href="#step5" data-toggle="tab">Upload Pictures</a>
                    </li>
                    <li class="disabled">
                        <a href="#step6" data-toggle="tab">Upload Videos</a>
                    </li>
                </ul>

i didn't post the rest because it is too big now everything is working fine it is going to next tab but what i want is to on page load it show the active tab not the first one i have also checked this question but again he is using click tab to go to next step and i am using button.

Here is the fiddle of my code

Community
  • 1
  • 1
jayant rawat
  • 305
  • 4
  • 19

1 Answers1

0

First of all your question in not clear. Try to make it in sync with Twitter Bootstrap. Having said that, what you are trying to do, is not recommended in Bootstrap; which provides these components ready-to-use in websites. Don't try to customize basic components in Bootstrap.

Your issue can be solved using this component in Bootstrap.

Sahil Babbar
  • 579
  • 1
  • 7
  • 21