I would like to know how I do to instead of having multiple pages for each menu option, I just render according to the click event the content on the screen, for example:
<main class="container">
<div class="banner">
<img class="img-responsive" srcset="img/publicidade_cupom.png" alt="banner-guia-cupom">
</div>
<div class="menu-opcoes">
<ul>
<li class="menu-opcoes-principal"><a href="#">Compras</a></li>
<li class="menu-opcoes-right"><a href="indexCadastro.html">Cadastro</a></li>
<li class="menu-opcoes-right"><a href="#">Endereço</a></li>
<li class="menu-opcoes-right"><a href="#">Atendimento</a></li>
<li class="menu-opcoes-right"><a href="indexPainelClienteComprar.html">Pagamento</a></li>
<li class="menu-opcoes-right"><a href="#">Sair</a></li>
</ul>
</div>
<hr />
<div class="conteudo-muda-deacordo-com-o-menu-opcoes">
<div class="exemplo-de-cupom col-md-6">
<img class="img-responsive" src="img/cupom_modelo.png" alt="cupom-de-exemplo"/>
</div>
<div class="menu-opcoes-de-compra col-md-6">
<form class="form-compra" name="formCompra" method="get" onsubmit="return validaPainelCliente(this)">
<div class="form-group row">
<label for="quantidade" class="col-sm-3 col-form-label">Quantidade:</label>
<div class="col-sm-12 col-md-4">
<input type="number" class="form-control" id="quantidade" placeholder="Ex:300" min="0">
</div>
</div>
<div class="form-group row">
<label for="inputEntregar" class="col-sm-3 col-form-label" id="entrega">Entregar:</label>
<div class="col-sm-12 col-md-4">
<select class="form-control" name="category">
<option selected>Escolha..</option>
<option value="1">Sim</option>
<option value="2">Não</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="preco" class="col-sm-3 col-form-label">Preço:</label>
<div class="col-sm-12 col-md-4">
<input type="text" class="form-control" id="preco">
</div>
</div>
<div class="form-group row">
<label for="preco" class="col-sm-3 col-form-label">Valor Total:</label>
<div class="col-sm-12 col-md-4">
<input type="text" class="form-control" id="valorTotal">
</div>
</div>
</form>
</div>
</div>
The top part is common on all screens, what changes or changes will be the part of the div <div class="conteudo-muda-deacordo-com-o-menu-opcoes">
Could you give me a hand, how will I do it? What do I need to read or search to do?