Nav-tabs bootstrap by setting active in the URL

Asked

Viewed 955 times

0

I can activate Nav-tab through the url, the #Value activates Nav-tab Value. Example:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Or when I click on a tab, the url is filled with #listReserva. Any suggestions?

javascript html

  • And what is your question?

  • I’m sorry, how can I?

  • Alisson, go to Help and take the Sopt Tour if you haven’t already done it. You can edit your question making it clear and objective. What do you want to know? What’s your problem? That’s it, we need information to help you.

  • Another thing, I checked that you have not marked the answers to your questions, you should mark the one that best answered you or indicated a solution, and you can also vote on questions and resonators that are important or interesting to you. So you participate better and contribute to the community.

  • 1

    Hello Alisson. I noticed that you have flagged your own questions with explanations that I am not understanding. In this case was: Nav-tabs bootstrap. What do you mean? The signage of a post serves to prompt the attention of a moderator to solve any problem with the post, and you are using the signage incorrectly. See your signage history here: http://answall.com/users/flag-summary/45854 To notify me use a @ before my name.

1 answer

0


You can, for example, access 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>

  • Apparently it worked, I only need to "log in" twice on the link to enable the Reserve List for example, that’s right?

  • Hamm? Strange... When you hit enter, don’t you take it? @Alisson

  • No, I need to enter enter twice. I also needed when I clicked on the tab, the url to be filled with the #serverlist

  • Done, click tabs and refresh to test @Alisson . Now the url also changes

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.