<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="cm-menu-scroller">
<ul class="cm-menu-items">
<!-- Melhorias: dependendo de qual eu clicar quero que a classe active fique ativa -->
<div id="Myli">
<!-- contador é um elemento que ouve o clique do mouse -->
<li class="contador active"><a href="home" class="sf-house">Home</a></li>
<li class="contador"><a href="{{route('Orcamentos.index')}}" class="sf-money">Orçamentos</a></li>
<li class="contador"><a href="cadastrarItens" class="sf-notepad">Cadastrar</a></li>
<li class="contador"><a href="#" class="sf-post-it">Ativdades</a></li>
<li class="contador"><a href="#" class="sf-pencil">Pedidos</a></li>
<li class="contador"><a href="#" class="sf-brick">Peças</a></li>
</div>
<script type="text/javascript">
// Capturar os elementos li dento da div Myli
var liContainer = document.getElementById("Myli");
// Capturar todos os li com a class="contador" que estiver dentro da div
var li = liContainer.getElementsByClassName("contador");
//passar por todos os li e adicionar o active na class que foi clicada por ultimo
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</ul>
</div>
I have a script that adds a class="active" in the element that was clicked on the main view, which serves as the base for the whole system, which works perfectly, but when I extend (@extends) this view the modification made by script rests.
How can I keep the modification made in the class="active" in the other views that extend this principal?
code: