The provided code is my solution to allow switching between different sections using a side navigation bar. Here are a few things that I identify as possible shortcomings of this solution. And my code can have errors.
- Namespace collision.
- Having to add class="display_hidden" to every section in the begiing.
Is there well-known solutions or industrial practice to the same problem?
var cur_active = undefined;
var cur_sec = undefined;
$(function() {
var cur_active = $("#b_0");
var cur_sec = $("#s_0");
$.each($('[id^=b_]'), function(index, value) {
$("#b_" + index + " a").on('click', function(e) {
var next_active = $("#b_" + index);
var next_sec = $("#s_" + index);
cur_active.removeClass('active');
cur_sec.addClass('display_hidden');
next_active.addClass('active');
next_sec.removeClass('display_hidden');
cur_active = next_active;
cur_sec = next_sec;
});
});
});
.display_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li id="b_0" role="resentation" class="active"><a>1</a></li>
<li id="b_1" role="resentation"><a>1</a></li>
<li id="b_2" role="resentation"><a>1</a></li>
<li id="b_3" role="resentation"><a>1</a></li>
</ul>
</div>
<div class="col-md-10">
<section id="s_0">S1</section>
<section id="s_1" class="display_hidden">S2</section>
<section id="s_2" class="display_hidden">S3</section>
<section id="s_3" class="display_hidden">S4</section>
</div>
</div>