simple tab

css:-
-------
.tab-nav{ display: flex; width: 100%;}
.tab-nav ul{margin: 0px; padding: 0px; list-style:  none; display: flex; flex-wrap: wrap;}
.tab-nav ul li{ margin: 0px; padding: 10px; font-weight: bold; color: #000; text-decoration: none;}
.tab-nav ul li.active{background-color: red; color: #fff; font-weight: bold;}
.tab-cont{ width: 100%; height: auto; background-color: #eaeaea; margin-bottom: 5px; padding: 10px; display: none;}
.tab-cont.active{ color: #fff; background-color: #ffc3c3; display: block;} 
.tab-cont p{ color: #2b2b2b;margin: 0px;}
.active{ color: #fff; background-color: #ffc3c3;} 

Html:-

-------

 <div class="tab-body">

        <div class="tab-nav">

            <ul>

                <li class="active" id="tab1">Home</li>

                <li id="tab2">About Us</li>

                <li id="tab3">Services</li>

                <li id="tab4">Contact Us</li>

                <li id="tab5">Contact Us</li>

            </ul>

        </div>

        

         

        <div class="tab-cont active" id="tab1c"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, fugiat. Quaerat temporibus deleniti ex at, consectetur magnam voluptas dolores atque asperiores quis dolorum assumenda, eaque soluta ipsa quibusdam rem et velit, quasi quo! Natus deleniti aliquid ipsa atque quam perspiciatis, repellendus nostrum? Asperiores expedita facere fugiat provident maxime aliquid ea.</p></div>

       

         <div class="tab-cont" id="tab2c"><p>vident maxime aliquid ea.</p></div>

      

          <div class="tab-cont" id="tab3c"><p>consectetur magnam voluptas dolores atque asperiores quis dolorum assumenda, eaque soluta ipsa quibusdam rem et velit, quasi quo! Natus deleniti aliquid ipsa atque quam perspiciatis, repellendus nostrum? Asperiores expedita facere fugiat provident maxime aliquid ea.</p></div>

       

         <div class="tab-cont" id="tab4c"><p> assumenda, eaque soluta ipsa quibusdam rem et velit, quasi quo! Natus deleniti aliquid ipsa atque quam perspiciatis, repellendus nostrum? Asperiores expedita facere fugiat provident maxime aliquid ea.</p></div>

       

         <div class="tab-cont" id="tab5c"><p>ibus deleniti ex at, consectetur magnam voluptas dolores atque asperiores quis dolorum assumenda, eaque soluta ipsa quibusdam rem et velit, quasi quo! Natus deleniti aliquid ipsa atque quam perspiciatis, repellendus nostrum? Asperiores expedita facere fugiat provident maxime aliquid ea.</p></div>

 </div>

JS:-

-----------

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

     $(".tab-nav ul li").on("click", function(){

        var tab_id = $(this).attr("id");

         $(this).addClass("active").siblings().removeClass("active")

         $("#" + tab_id + "c").addClass("active").siblings().removeClass("active");

            

        });

        

    });

    

    </script>