Problem using Bootstrap Tabs

Asked

Viewed 782 times

0

I’m trying to use the tabs component of bootstrap, but I’m not able to make it work, I’ve taken several examples, but I can’t make it work.

<script type="text/javascript" src="lib/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-2.2.1.min.js"></script>

<div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab">Totais por Filiais</a></li>
                        <li><a href="#tab_2" data-toggle="tab">Informações sobre pagamento</a></li>
                        <li><a href="#tab_3" data-toggle="tab">Observações</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                            Tab 1
                        </div>

                        <div class="tab-pane" id="tab_2">
                            Tab 2
                        </div>

                        <div class="tab-pane" id="tab_3">
                           Tab 3
                        </div>
                    </div>
                </div>
            </div>

When I click, it always stays in the first tab, it doesn’t change to the others. someone knows where the error is, or if some code is missing?

javascript css bootstrap-3
  • 1

    At first your code seems to be right friend, follow the bootply link with your code: http://www.bootply.com/1XZyeROFwe

  • The error doesn’t seem to be in front-end. But check the path of your script and css to see if it’s all in compliance...

  • I’ve checked the script path, but it’s still the same, I have no idea why it’s not working :/

  • The div are right @Geferson? that from what I told you here, the div of Row is missing... It’s right there?

  • Yes @Daniel, I found the problem. hadn’t touched me, but I put the bootstrap lib before Jquery, and bootstrap uses Jquery, now I put Jquery before and it’s working. my inattention, thank you so much for your help.

  • Jquery always has to come before Bootstrap, if it doesn’t work right, download everything including Carousel.

Show 1 more comment

1 answer

1


The libs were inverted, as bootstrap depends on Jquery, I put jQuery’s before and everything started working.

<script type="text/javascript" src="lib/jquery/jquery.js"></script>

<script type="text/javascript" src="lib/bootstrap/bootstrap.min.js"></script>

Browser other questions tagged javascript css bootstrap-3

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