<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="/static/scrapy/style.css">
<div class="container w-50">
<h1 class="display-4">Scrapy Data</h1>
<!-- List group -->
<div class="col-8 mx-auto my-5 py-5" id="Group">
<div class="list-group">
<div>
<a id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
<div class="d-flex align-items-center">
<span>Tipos</span>
<div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
</div>
<a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>
</a>
</div>
<div>
<a id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
<div class="d-flex align-items-center">
<span>Habilidades</span>
<div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
</div>
<a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>
</a>
</div>
<div>
<a id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
<div class="d-flex align-items-center">
<span>Categorias</span>
<div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
</div>
<a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>
</a>
</div>
<div>
<a id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
<div class="d-flex align-items-center">
<span>Pokemons</span>
<div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
</div>
<form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
<div class="ml-2 mt-2 form-group">
<input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
</div>
<button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
</form>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
function disableLinks() {
$("a").addClass("disabled");
}
function showSpinners(arg){
$(arg).collapse()
$("a").collapse('hide')
}
</script>
Não consegui criar um título que remetesse bem ao problema, mas aqui vai a explicação. Estou usando essas tags links com a class "btn" do bootstrap, quando eu clico no link dos cards (tag de link com o id [algo]-link, por exemplo Tipos-link) a tag de link dentro dela (com class "btn") deveria aparecer dentro desse card, mas aparece fora, no entanto se eu mudo para a tag <button>
fica tudo certo, mas preciso ligar essa tag a um link, então não poderia usar <button>
. Alguma dica?