Bootstrap Tab pills not working or linking with tab panel

Question

I have created a bootstrap pills in my website but its is not working the way its showed on documentation. when I click on the pill its not opening the specific tab panel. here am attaching the code.Here am tring to add tabs pills linking with specific contents below in divs. Don't know what am missing in the code but when i click on the tab the contents are not changing.

<script>
        $(".nav li a").on("click", function() {
            $(".nav li a").removeClass("active");
            $(this).addClass("active");
        });

    </script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main role="main" class="container">

        <div class="text-center mt-5 pt-5">
            <h1>Verbal Ability :: Comprehension</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>

        <!--Test Links-->

        <div class="overflow-auto bg-light" style="height: 200px;">
            <ol class="nav nav-pills flex-column">

                <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="pill">Comprehension - Section 3</a>
                </li>


            </ol>

        </div>

        <div class="tab-content">
            <div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
            <div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
        </div>

    </main><!-- /.container -->




<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Answer 1

1. You should load jQuery before loading Bootstrap. Please read the docs properly.
2. Your script method of adding a class("active") was wrong. There is an inbuilt method provided by Bootstrap .tab("show") which then enables the tab to toggle properly as per the given ID's

I have changed the snippet and it's working now. Kindly go through this https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp to learn more in detail.

    $(document).ready(function(){
      $(".nav-item a").click(function(){
        $(this).tab('show');
      });
    });
   

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main role="main" class="container">

        <div class="text-center mt-5 pt-5">
            <h1>Verbal Ability :: Comprehension</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>

        <!--Test Links-->

        <div class="overflow-auto bg-light" style="height: 200px;">
            <ol class="nav nav-pills flex-column">

                <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#third" data-toggle="pill">Comprehension - Section 3</a>
                </li>


            </ol>

        </div>

        <div class="tab-content">
            <div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
            <div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
            <div id="third" class="tab-pane fade" role="tabpanel">Content 3</div>
        </div>

    </main><!-- /.container -->


<!-- jQuery should come before loading boostrap -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>