a situação é que é um app para ser usado por gaçons em um restaurante, onde ele seleciona o pedido através do click nos elementos desejado pelo cliente.
tenho as seguintes tabs no corpo html :
<ul class="tabs yellow darken-4">
<li class="tab">
<a href="#bolos"
class="white-text waves-effect waves-light">
Bolos
</a>
</li>
<li class="tab">
<a href="#bebidas"
class="white-text waves-effect waves-light">
Bebidas
</a>
</li>
</ul>
a tab bolo, e a tab bebidas, quando clico na tab bolo ela me exibe o conteudo da div bolo assim sucessivamente
a baixo as divs do bolo e da bebida
<div id="bolos" class="section">
<h6 class="container brown-text">Fatia</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Só de Cenoura</a>
<a class="collection-item waves-effect black-text">Com Nutella</a>
<a class="collection-item waves-effect black-text">De Brigadeiro</a>
<a class="collection-item waves-effect black-text">Açucarado</a>
</div>
<h6 class="container brown-text">Inteiro</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Só de Cenoura inteiro</a>
<a class="collection-item waves-effect black-text">Com Nutella inteiro</a>
<a class="collection-item waves-effect black-text">De Brigadeiro inteiro</a>
<a class="collection-item waves-effect black-text">Açucarado inteiro</a>
</div>
</div>
<div id="bebidas" class="section">
<h6 class="container brown-text">Cafés</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Espresso</a>
<a class="collection-item waves-effect black-text">Capuccino</a>
<a class="collection-item waves-effect black-text">Mocachino</a>
</div>
<h6 class="container brown-text">Refrigerantes</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Soda</a>
<a class="collection-item waves-effect black-text">Guaraná</a>
<a class="collection-item waves-effect black-text">Coca</a>
</div>
<h6 class="container brown-text">Sucos</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Melancia</a>
<a class="collection-item waves-effect black-text">Tangerina</a>
<a class="collection-item waves-effect black-text">Limão</a>
</div>
</div>
<div class="fixed-action-btn">
<a class="btn-floating btn-large waves-effect waves-light brown modal-trigger"
href="#confirmacao" id="confirmar">
<i class="material-icons">done</i>
</a>
</div>
então tenho um botão de confirmar que ao ser clicado ele abre um modal com o resumo do pedido :
<div class="fixed-action-btn">
<a class="btn-floating btn-large waves-effect waves-light brown modal-trigger"
href="#confirmacao" id="confirmar">
<i class="material-icons">done</i>
</a>
</div>
e abaixo o corpo do modal :
<div id="confirmacao" class="modal modal-fixed-footer">
<div class="modal-content">
<h5>Resumo do pedido</h5>
<input id="numero-mesa" type="number" class="validate" placeholder="Número da mesa">
<blockquote id="resumo"></blockquote>
</div>
<div class="modal-footer">
<button class="btn deep-orange waves-effect waves-light modal-close acao-finalizar">
Pedir
</button>
<button class="btn-flat waves-effect waves-red modal-close acao-limpar">
Cancelar
</button>
</div>
</div>
no modal tem o botão cancelar, e ao cancelar o modal fecha voltamos a ultima aba que foi selecionada com os pedidos cancelados (badges removidas)
minha duvida é, como faço para quando eu aperte o botão cancelar eu n volte pra ultima tab ou aba selecionada, e sim para uma aba específica que eu setar através do jquery
eis aqui a função usada para limpar o pedido, quando o botão cancelar é clicado :
$('.acao-limpar').on('click', function() {
$('#numero-mesa').val('');
$('.badge').remove();
});