So, I have got a couple of html files that share exactly some lines of the code. I have that code with an include and I call that in every single page. It's basically a menu or better saying, a Bootstrap list-group. Here is the code:
<div class="list-group">
<a href="<?php echo cfgRoot; ?>/app/page1.php" class="list-group-item"><i class="glyphicon glyphicon-send"></i> Page1</a>
<a href="<?php echo cfgRoot; ?>/app/page2.php" class="list-group-item"><i class="glyphicon glyphicon-cog"></i> Page2</a>
<a href="<?php echo cfgRoot; ?>/app/page3.php" class="list-group-item active"><i class="glyphicon glyphicon-question-sign"></i> Page3</a>
<a href="<?php echo cfgRoot; ?>/app/page4.php" class="list-group-item"><i class="glyphicon glyphicon-picture"></i> Page4</a>
</div>
The problem with this is that, I need my active class to change depending on which page I'm visiting. Therefore, we can say that the menu is only 99% the same, I mean, that class needs to be changed.
What's the best approach, recommendation or solution to tackle this?