I am in the process of developing a tool that will assist my colleagues in reviewing and comparing information. I aim to present this information consistently for each order, with multiple groups of information per order accessible through nav-tabs. I would like all selector bars to update when a user clicks on any one of the tab selectors, rather than just the clicked one.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA1' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='TabB1' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='TabC1' class='tab-pane fade TabC'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA2' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='TabB2' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='TabC2' class='tab-pane fade TabC'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>If one selects any selector bar button, both tabs should be updated accordingly. Currently, only the selected tab is changing while the unselected one remains the same. Is there a solution to address this issue?