Bootstrap - Ao clicar personalizar estilo da aba (active)

[Bruno Carazato 0]

Olá, estou utilizando o projeto de estilo do getbootstrap e estou com uma dificuldade.

Tenho uma lista de navegação por abas porém quero que quando o usuario clique, além de levá-lo à outra página a aba fique "ativa"...

Quando eu deixo o primeiro item por exemplo com a class "active" ele fica, porém nao muda...

Tentei fazer tal funcao com jQuery (sou iniciante...) pesquisei bastante, teve uma hora que consegui porem a pagina nao carregava somente funcionava a troca das abas....

 

 

Em umas de minhas pesquisas foi sugerido:

	<script>
	$(document).ready(function () {
    	$('.nav li a').click(function(event) {
        	$('.nav li').removeClass('active');

        	var $parent = $(this).parent();
        	if (!$parent.hasClass('active')) {
          	  $parent.addClass('active');
        	}
        	event.preventDefaul();
    	});
	});
	</script>

Porém não funcionou...

 

 

Minha navegação:

       <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="index.php">Home</a></li>
          <li role="presentation"><a href="consulta.php">Consulta</a></li>
          <li role="presentation"><a href="contato.php">Contato</a></li>
      </ul>

Obrigado pela atenção

[wilnet 92]

Olá Bruno, blza!

 

Veja alguns que funciona: Em jquery e tb com CSS

 

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

 

http://jsfiddle.net/9nd4j/1/

 

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

 

 

Espero que ajude.

 

vlw

[Bruno Carazato 0]

Olá wilnet, obrigado pela resposta, gostaria que me ajudasse no seguinte.

 

quando eu uso:

<script>
$(document).ready(function () {
    $('.nav-tabs li a').click(function(event) {
        $('.nav-tabs li').removeClass('active');

        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
       return false;
    });
});
</script>

retornando false;

a selecao das tabs funcionam, porém o conteudo do body nao carrega... fiz o header e o body separados... não entendo o que ta acontecendo

[William Bruno 1501]

Não carrega por causa do return false;

 

Esse return impede que a tag <a> siga o seu fluxo normal.

Nesse caso, vc vai ter q fazer a seleção de aba de outra forma e tirar o return false dali.

 

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

[Bruno Carazato 0]

 

 

Não deu certo aqui, to começando a achar que o estilo deve ter tanto algum tipo de conflito,

Voltando ao meu script

 

retornando

event.preventDefault();

 

acontece a mesma coisa, a paginacao funciona mas o conteudo da pagina nao mudar nem o url

[William Bruno 1501]

Exato, pq o event.preventDefault() também impede que o fluxo da tag <a> seja seguido.

 

Novamente: vc terá que fazer a seleção de abas de outra forma. Assim com javascript vc não vai conseguir.