содержимое вкладки перекрывается с другим содержимым вкладки

Question

Я реализовал код, который имеет две вкладки, и я хочу, чтобы они появлялись при щелчке заголовка вкладки заголовка.но проблема заключается в том, что когда я загружаю содержимое страницы на второй вкладке, а на первой вкладке выполняется предварительный просмотр.но когда я перехожу ко второй вкладке и возвращаюсь, она работает, как и ожидалось.какие-либо предложения??вот мой код

 <div class="row">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#policy">POLICY PERFORMANCE</a></li>
            <li><a data-toggle="tab" href="#claim">CLAIMS</a></li>

        </ul>
        <div class="tab-content">
            <div id="policy" class="tab-pane fade in active">


                <div class="col-sm-4">
                    <h4>By Warranty</h4>
                    <p ng-show="warrentyChartAccess">* access restricted</p>
                    <p class="margin-top-20">
                        <div tc-chartjs-legend chart-legend="lineChart4"></div>
                    </p>
                    <div class="text-center margin-bottom-15">
                        <canvas class="tc-chart" height="175" tc-chartjs-pie chart-options="warrentyChartOptions" chart-data="warrentyChartData" chart-legend="lineChart4" width="250"></canvas>

                    </div>
                </div>

                <div class="col-sm-4">
                    <h4>By Product</h4>
                    <p ng-show="productChartAccess">* access restricted</p>
                    <p class="margin-top-20">
                        <div tc-chartjs-legend chart-legend="lineChart2"></div>
                    </p>
                    <div class="text-center margin-bottom-15">

                        <canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="productChartoptions" chart-data="productChartData" chart-legend="lineChart2" width="250"></canvas>

                    </div>
                </div>

                <div class="col-sm-4">
                    <h4>By Make</h4>
                    <p ng-show="makeChartAccess">* access restricted</p>
                    <div class="text-center margin-bottom-15">
                        <canvas ng-hide="makeChartAccess" class="tc-chart" height="250" tc-chartjs-radar chart-options="makeChartOptions" chart-data="makeChartData"></canvas>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="col-sm-6">
                    <h4>By Country</h4>
                    <p ng-show="countryChartAccess">* access restricted</p>
                    <div class="text-center margin-bottom-15">
                        <div google-chart chart="localchart"> </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <h4>By Month</h4>

                    <p ng-show="monthlyChartAccess">* access restricted</p>
                    <div class="text-center margin-bottom-15">
                        <canvas ng-hide="monthlyChartAccess" class="tc-chart" height="200" tc-chartjs-line chart-options="monthChartOptions" chart-data="monthChatsData"></canvas>
                    </div>
                </div>
            </div>
            <div id="claim" class="tab-pane fade in active">
                <div class="col-sm-4">
                    <h4>By Claim Status</h4>
                    <p ng-show="claimStatusChartAccess">* access restricted</p>
                    <p class="margin-top-20">
                        <div tc-chartjs-legend chart-legend="lineChart3" style="width:175px"></div>
                    </p>
                    <div class="text-center margin-bottom-15">

                        <canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimStatusChartOptions" chart-data="claimStatusChartData" chart-legend="lineChart3" width="250"></canvas>

                    </div>
                </div>
                <!--<div class="col-sm-4">
                    <h4>By Claim Invoice</h4>
                    <p ng-show="claimInvoiceChartAccess">* access restricted</p>
                    <p class="margin-top-20">
                        <div tc-chartjs-legend chart-legend="lineChart4" style="width:175px"></div>
                    </p>
                    <div class="text-center margin-bottom-15">

                        <canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimInvoiceChartOptions" chart-data="claimInvoiceChartData" chart-legend="lineChart4" width="250"></canvas>

                    </div>
                </div>-->
            </div>
        </div>
    </div>

Answer 1

Обе вкладки имеют класс как активный.Добавить активный класс на одну вкладку, которую вы хотите видеть на странице загрузки

<div id="policy" class="tab-pane fade in active">  
</div>
<div id="claim" class="tab-pane">
</div>