Question

127

How to use Bootstrap tabs?

rated 0 times [ 128] [ 1] / answers: 1 / hits: 51021 / 10 Years ago, wed, march 26, 2014, 12:00:00

I am trying to understand how to do this: http://getbootstrap.com/javascript/#tabs

I think the documentation is not detailed enough, because I can not understand how it works.

<div class=container>

    <ul class=nav nav-tabs>

        <li class=nav active><a href=#A data-toggle=tab>A</a></li>

        <li class=nav><a href=#B data-toggle=tab>B</a></li>

        <li class=nav><a href=#C data-toggle=tab>C</a></li>

    </ul>



    <!-- Tab panes -->

    <div class=tab-content>

        <div class=tab-pane fade in active id=A>Content inside tab A</div>

        <div class=tab-pane fade id=B>Content inside tab B</div>

        <div class=tab-pane fade id=C>Content inside tab C</div>

    </div>

</div>

This code gives me what I want
enter

However I can't switch between tabs.

So the question is: what JQuery or Javascript code should I add to make it work? What is shown in the example does not work :(

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Tailwind Custom Colors Not Complied

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How to write inline onclick function as es6 arrow function?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

View All

answered 10 Years ago damiondenzelc · Accepted Answer

This code works:

<div class=container>

    <ul class=nav nav-tabs>

        <li class=nav active><a href=#A data-toggle=tab>A</a></li>

        <li class=nav><a href=#B data-toggle=tab>B</a></li>

        <li class=nav><a href=#C data-toggle=tab>C</a></li>

    </ul>



    <!-- Tab panes -->

    <div class=tab-content>

        <div class=tab-pane fade in active id=A>Content inside tab A</div>

        <div class=tab-pane fade id=B>Content inside tab B</div>

        <div class=tab-pane fade id=C>Content inside tab C</div>

    </div>

</div>



<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>



<!-- Latest compiled and minified CSS -->

<link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>



<!-- Optional theme -->

<link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css>



<!-- Latest compiled and minified JavaScript -->

<script src=//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js></script>