How to make a bootstrap like Tabs and Pills using jquery and css

Question

firstly i know many will question why wouldn't I just use bootstrap pills and get it done in some seconds, the reason is there's requirement we aren't allowed to use bootstrap.. Now my question is i would like to make a bootstrap like Pills which i already made in the bellow fiddle, now i need to know how to use jquery to change the active class and also display the necessary content pane, in my code i have three sections namely "today , tomorrow and yesterday" which i would like to display depending on which option user click on. you can find my detail code in the fiddle link tabs fiddle thanks for any help

   $(document).ready(function() {

  $('#yes, #tomo').click(function() {
    $(this).removeClass('hoverEffect');
    $(this).addClass("c-active");
  });

  $('.yesterday, .today, .tomorrow').hover(function() {
    if (!$(this).hasClass('c-active')) {
      $(this).addClass('hoverEffect');
    }
  }, function() {
    if ($(this).hasClass('hoverEffect')) {
      $(this).removeClass('hoverEffect');
    }
  });
});

Answer 1

Simple implementation based on your code:

$(document).ready(function () {
    $('.nav-pill-item').click(function (e) {
        e.preventDefault();

        if ($(this).hasClass('c-active')) {
            return;
        }
        
        $('.nav-pill-item').removeClass('c-active');

        $('.content-pill').hide();

        $($(this).data('target')).fadeIn();

        $(this).addClass('c-active');
    });
});

.nav-pill-item {
    width: 31.33%;
    margin: 10px, 15px;
    color: #424242;
    float: left;
    margin-right: 3%;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

.nav-pill-item:hover {
    border-radius: 5px;
    background: #eee;
}

#nav-tomorrow {
    float: right;
    margin-right: 0;
}

#nav-today {
    margin-right: 0;
}

.calender .c-active {
    border-radius: 5px;
    color: #fff;
    background: #e2231a;
    padding-top: 5px;
    padding-bottom: 6px;
    border-top: 5px solid #2d0705;
}

.calender {
    margin-bottom: 30px !important;
    height: 50px;
}


/* Mobile friendly table start */

.contentTable {
    background-color: #ffffff;
    border-color: #ffffff;
    font-size: 13px;
    width: 100%;
    color: #323232;
}

.contentTable>thead {
    text-align: center !important;
    color: whitesmoke;
    background-color: #E2231A;
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: #feffbf;
}

#content-yesterday,
#content-tomorrow {
    display: none;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row prediction-tip-wrap">
    <section>
        <div class="col-md-12 calender">
            <div id="nav-yesterday" class="nav-pill-item" data-target="#content-yesterday">Yesterday</div>
            <div id="nav-today" class="nav-pill-item c-active" data-target="#content-today">Today</div>
            <div id="nav-tomorrow" class="nav-pill-item" data-target="#content-tomorrow">Tomorrow</div>
        </div>
    </section>
    <!--Mobile friendly table start-->
    <section id="content-today" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Country</td>
                    <td style="width: 25%;">Subject</td>
                    <td style="width: 26%;">Courses</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>FRA</span></td>
                    <td><span>Mathematics </span></td>
                    <td><span> Advance math </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>SPA</span></td>
                    <td><span>English</span></td>
                    <td><span>Literature</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="content-tomorrow" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Country</td>
                    <td style="width: 25%;">College</td>
                    <td style="width: 26%;">Names</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>Bra</span></td>
                    <td><span>some info </span></td>
                    <td><span> some info </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>TNT</span></td>
                    <td><span>English</span></td>
                    <td><span>some info</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="content-yesterday" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Education</td>
                    <td style="width: 25%;">Subject</td>
                    <td style="width: 26%;">Courses</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>Degree</span></td>
                    <td><span>Mathematics </span></td>
                    <td><span> some info </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>SPA</span></td>
                    <td><span>English</span></td>
                    <td><span>Literature</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <!--Mobile friendly table end-->
</div>

Answer 2

Look at the snippet I've provided. Give all your navigation links a matching class, and the tabs another matching class(For making the tab-system dynamic).
Give each link and its corresponding tab, a matching [data-target] and [data-tab] attribute to connect them
Then through jquery's onclick handler, you can toggle classes of links and tabs.

$('.nav-link').on('click', function(e) {
  e.preventDefault();
  $('.nav-link').removeClass('active');
  $(this).addClass('active');
  $('.tab').removeClass('active');
  var tabID = $(this).attr('data-target');
  $('.tab[data-tab="' + tabID + '"]').addClass('active');
});

nav {
  background-color: #f2f4f6;
  display: flex;
}

.nav-link {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: .5rem;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  border-bottom-color: rgba(0,0,0,.05);
}

.nav-link.active {
  border-bottom-color: #1ee3cf;
}

section {
  margin-top: .5rem;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a href="#" class="nav-link active" data-target="tab-1">Tab One</a>
  <a href="#" class="nav-link" data-target="tab-2">Tab Two</a>
  <a href="#" class="nav-link" data-target="tab-3">Tab Three</a>
</nav>

<section>
  <div class="tab active" data-tab="tab-1">Content One</div>
  <div class="tab" data-tab="tab-2">Content Two</div>
  <div class="tab" data-tab="tab-3">Content Three</div>
</section>