I have the following code that calls all categories for a menu. They are dynamically created:
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 I have to create the pages for each category equal to a tab:
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);
}
});
}
For a better understanding, an image follows:
Sofarsogood,theproblemiswhenitiscreateddynamically,whenIclickonthesoftdrinksmenuithastochangethedivbelowsnackstosoftdrinks.ForthisinDIV.item-selecionado
ithastoremovetheclassthatisdiv-ativa
tobyclass.div-nao-ativa
,sothattheitemdisappearsandthenextitemappearstobetherefrigerant.p>
ThebuttonbelowIhavethebuttoncodethatisatthetimeofclickingthecategory:
$(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');
});