Tenho o seguinte código que chama todas as categorias para um menu. Elas são criadas dinamicamente:
function retornaCategorias (){
var container = $("#navmenu");
var container1 = $(".top-nav");
var listaCategorias = container.find(".mostracategoria");
var listaCartegoriasInternas = container1.find(".menuinternas");
var mostraCategorias = "";
var mostraCategoriasInternas = "";
var dadosHtml = "";
$.ajax({
type: 'GET',
dataType: 'json',
url: 'http://api.teste/store/categorias',
success: function(retorno)
{
retorno.data.forEach(function(item)
{
mostraCategorias += "<li><a id='" + item.categoria_id + "' class='btn-categoria-selecionada' title='" + item.nome + "' href='#'>" + item.nome + "</a></li>";
mostraCategoriasInternas += "<li class='dropdown1'><a id='" + item.categoria_id +"' href='=index.php?id=" + item.categoria_id + "' title='" + item.nome + "'>" + item.nome + "</a><li>";
listaCategorias.html(mostraCategorias);
listaCartegoriasInternas.html(mostraCategoriasInternas);
// ativa o primeiro elemento da função
$("ul.mostracategoria li:first-child").addClass("active-button");
// $(".item-selecionado").attr('id',mostraCategorias);
})
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("Status do Servidor: " + textStatus);
alert("Erro do Servidor: " + errorThrown);
}
});
} // FINAL DA LISTA DE CATEGORIAS
Ok eu tenho que criar as páginas para cada categoria igual a uma aba:
function montarPaginas ()
{
var container = $(".item-selecionado");
var mostraPaginas = "";
$.ajax({
type: 'GET',
dataType: 'json',
url: 'http://api.teste/store/categorias',
success: function(retorno)
{
retorno.data.forEach(function(item)
{
mostraPaginas += "<div id='" + item.nome + "' class='pagina-selecionada nao-ativa'>" + item.nome + "</div>";
container.html(mostraPaginas);
$(".item-selecionado div:nth-child(1)").addClass('div-ativa');
})
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("Status do Servidor: " + textStatus);
alert("Erro do Servidor: " + errorThrown);
}
});
}
Para melhor entendimento segue uma imagem:
Até aqui tudo bem, o problema é quando ele é criado dinamicamente, quando eu clicar no menu refrigerantes ele tem que mudar a div abaixo de lanches para refrigerantes. Para isso na DIV .item-selecionado
ele tem que retirar a classe que está div-ativa
para por a classe .div-nao-ativa
, para que o item desapareça e o próximo item apareça que é o refrigerante.
O botão abaixo eu tenho o código do botão que é na hora de clicar na categoria:
$(document).on("click",".btn-categoria-selecionada",function()
{
$("ul.mostracategoria li:first-child").removeClass("active-button");
$(this).addClass("active-button");
var idcategoria = $(this).parent().find(".btn-categoria-selecionada").attr("id");
var nomecategoria = $(this).parent().find(".btn-categoria-selecionada").attr("title");
var indice = $(this).parent.index();
indice++;
$(".item-selecionado div").removeClass('div-ativa');
$(".item-selecionado div:nth-child("+indice+")").addClass('div-ativa');
});