My goal is to create a seamless navigation experience between tabs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-content">
<div id="divOne" class="tab-pane fade in active show">
Div One Content
<a class="nav-link" data-toggle="tab" href="#divTwo">Next</a>
</div>
<div id="divTwo" class="tab-pane fade">
Div Two Content
<a class="nav-link" data-toggle="tab" href="#divOne">Previous</a>
</div>
</div>
Upon initial load, clicking the 'Next' link switches from divOne to divTwo. Clicking 'Previous' reverses the switch. However, subsequent clicks on 'Next' do not trigger any action.
I am unsure if there is an issue with my markup or if I should consider using jQuery for smoother navigation between tabs.