Javascript 选项卡内容与其他选项卡内容重叠
我已经实现了一个代码,它有两个选项卡,我希望在单击标题选项卡时显示它们。但问题是,一旦我在第二个选项卡中加载了页面内容,也在第一个选项卡中预览了页面内容。但当我切换到第二个选项卡并返回时,它会按预期工作。 有什么建议吗?? 这是我的密码Javascript 选项卡内容与其他选项卡内容重叠,javascript,html,angularjs,bootstrap-4,Javascript,Html,Angularjs,Bootstrap 4,我已经实现了一个代码,它有两个选项卡,我希望在单击标题选项卡时显示它们。但问题是,一旦我在第二个选项卡中加载了页面内容,也在第一个选项卡中预览了页面内容。但当我切换到第二个选项卡并返回时,它会按预期工作。 有什么建议吗?? 这是我的密码 <div class="row"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href=
<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>
担保
*访问受限
副产品
*访问受限
制造
*访问受限
按国家
*访问受限
按月
*访问受限
按索赔状态
*访问受限
两个选项卡都将类设置为活动。将活动类添加到要在页面加载时看到的单个选项卡
我想问题在于css。查看您是否正确隐藏和显示了内容,或者是否有任何css覆盖它工作,但问题是没有像以前那样加载我的图形。我已经实现了一个代码,它给出了一个图表,所以当我删除活动部分时,它不会在第二个选项卡中的图表中显示内容。第一个选项卡正在加载,没有任何问题。您可以添加与问题一起使用的css吗