탭메뉴

            /*탭메뉴*/
            .tab-nav {
                text-align: center;
                width: 28%;
                margin: auto;
                display: flex;
                justify-content: space-between;
            }
            .tab-nav li{
                display: inline-block; text-align:center;
            }
            .tab-nav li a{ 
                display:block; 
                border: 1px solid #333; 
                color: #000; 
                padding: 6px 12px; 
                font-size:0.875rem;
            }
            .tab-nav li a:hover,
            .tab-nav li a.active{
                background:#212529; color:#fff; 
            }

 

$(function(){
  $('.tab-content > div').hide();
  $('.tab-nav a').click(function () {
    $('.tab-content > div').hide().filter(this.hash).fadeIn();
    $('.tab-nav a').removeClass('active');
    $(this).addClass('active');
    return false;
  }).filter(':eq(0)').click();
  });

                            <!-- 차트 -->
                            <div class="col-xl-6">
                                <div class="card mb-4 shadow-sm" style="height:370px;">
                                    <div class="card-header d-flex align-items-center justify-content-between px-4">
                                        <a href="#">사용내역</a>
                                        <i class="fas fa-angle-right"></i>
                                    </div>
                                    <div class="chart-box p-3">
                                        <div class="tab-content">
                                            <div id="tab01">
                                                <canvas id="myAreaChart01" width="100%" height="40"></canvas>
                                            </div>
                                            <div id="tab02">
                                                <canvas id="myAreaChart02" width="100%" height="40"></canvas>
                                            </div>
                                            <div id="tab03">
                                                <canvas id="myAreaChart03" width="100%" height="40"></canvas>
                                            </div>
                                        </div>
                                        <ul class="tab-nav mt-2">
                                            <li><a href="#tab01">시간별</a></li>
                                            <li><a href="#tab02">일별</a></li>
                                            <li><a href="#tab03">월별</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>