单击特定按钮显示导航

Question

I am using nav-link for tabs need to go second tab directly after 1 tab submit

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">VIEW ENTITIES</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">CREATE ENTITY</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

What I tried

('#profile').show()  

Answer 1

If i understand correctly you mean you need to trigger the tab2 when you click on tab1 right?

Then use the Jquery Trigger:

$('#profile-tab').trigger('click');

Please let me know if this helps

Answer 2

HTML Nav Tabs Bootstrap 4

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">VIEW ENTITIES</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
            aria-selected="false">CREATE ENTITY</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
            aria-selected="false">Contact</a>
    </li>
</ul>

Content tabs

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <input class="btn btn-info nextTab" type="submit" >
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <input class="btn btn-info nextTab" type="submit" >
    </div>        
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <input class="btn btn-info nextTab" type="submit" >
    </div>
</div>

Generic next step

    <script>
        jQuery(function(){
            jQuery('.nextTab').on('click',function(){

                //Unidirectional -->

                var nextTAB = this.parentElement.nextElementSibling;

                if ( nextTAB != undefined ) {
                    //Do some stuff and then.. change the tab.
                    jQuery('#'+nextTAB.id+'-tab').trigger('click');
                } 

            });
        });

  </script>