0

Posso ativar o nav-tab atraves da url, o #Valor ativa o nav-tab Valor. Exemplo:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Ou então quando eu clico em uma aba, a url é preenchida com #listaReserva. Alguma sugestão?

5
  • E qual é a sua pergunta?
    – Leo
    Commented 13/07/2016 às 3:27
  • Desculpa, como posso fazer? Commented 13/07/2016 às 3:31
  • Alisson, acesse a Ajuda e faça o Tour do SOpt se ainda não fez. Você pode editar sua pergunta deixando ela clara e objetiva. O que quer saber? Qual é o seu problema? É isso, precisamos de informações para poder te ajudar.
    – Leo
    Commented 13/07/2016 às 3:36
  • Outra coisa, verifiquei que você não tem marcado as respostas de suas perguntas, você deve marcar a que melhor te respondeu ou indicou uma solução, e também pode votar em perguntas e resostas que forem importantes ou interessantes para você. Assim você participa melhor e contribui com a comunidade.
    – Leo
    Commented 13/07/2016 às 3:43
  • 1
    Olá Alisson. Percebi que você tem sinalizado suas próprias perguntas com explicações que não estou entendendo. Nesse caso foi: Nav-tabs bootstrap. O que quer dizer com isso? A sinalização de um post serve para solicitar a atenção de um moderador para resolver algum problema com o post, e você está usando a sinalização de forma errada. Veja seu histórico de sinalizações aqui: pt.stackoverflow.com/users/flag-summary/45854 Para me notificar use um @ antes do meu nome.
    – Math
    Commented 13/07/2016 às 11:54

1 Resposta 1

0

Pode sim, aceda por exemplo a http://exemplo.com#listaReservas:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="#home" data-toggle="tab">home</a></li>
    <li><a data-target="#listaReservas" data-toggle="tab">Lista de Reservas</a></li>
    <li><a data-target="#lista-espera" data-toggle="tab">Lista de espera</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="listaReservas">Lista de Reservas</div>
    <div class="tab-pane" id="lista-espera">Lista de espera</div>
</div>

<script>
    var tab_on = location.hash; // aqui é onde vamos agarrar o valor da hash do url (ex: #listaReservas)
    $('#myTab a[data-target="' +tab_on+ '"]').tab('show');
    $('#myTab a').on('click', function() {
        var this_target = $(this).data('target');
        var window_href = window.location.href.split('#')[0];
        history.pushState('', '', window_href+this_target); // mudar o url dinamicamente
    });
</script>
4
  • Aparentemente funcionou, só preciso "entrar" duas vezes no link para o mesmo activar o Lista de Reserva por exemplo, é isso mesmo? Commented 13/07/2016 às 11:38
  • Hamm? que estranho... Quando carrega no enter não assume? @Alisson
    – Miguel
    Commented 13/07/2016 às 11:53
  • Não, preciso entrar com enter duas vezes. Precisava também que quando clicasse no tab, a url fosse preenchida com o #listaReservas Commented 13/07/2016 às 23:05
  • Feito, clique nas tabs e faça refresh para testar @Alisson . Agora o url também muda
    – Miguel
    Commented 14/07/2016 às 9:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .