Javascript Larvel:Jquery如何更改选项卡中的活动类？
我有一个标签，它是动态的。我在数据库中获取值，然后在选项卡中使用它 示例Javascript Larvel:Jquery如何更改选项卡中的活动类？,javascript,jquery,laravel,Javascript,Jquery,Laravel,我有一个标签，它是动态的。我在数据库中获取值，然后在选项卡中使用它 示例 I have 2 records it will look like this. 在每个选项卡中，它都有不同的值。更改选项卡内容时遇到问题，当我单击2021选项卡时，我的内容没有更改 查看 <ul class="nav nav-pills"> <li class="nav-item" style="width: 10%"> <a class="nav
I have 2 records it will look like this.
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active accounting-period" id="{{ date('Y',strtotime($company->accounting_period_start)) }}" data-toggle="pill" href="#{{ date('Y',strtotime($company->accounting_period_start)) }}">{{ date('Y',strtotime($company->accounting_period_start)) }}</a>
</li>
<li class="nav-item" style="width: 10%">
@foreach($previous_accounting_period as $key => $value)
<a class="nav-link accounting-period" id="{{ date('Y',strtotime($value->accounting_period_start)) }}" data-toggle="pill" href="#{{ date('Y',strtotime($value->accounting_period_start)) }}">{{ date('Y',strtotime($value->accounting_period_start)) }}</a>
@endforeach
</li>
</ul>
<div class="tab-content">
@foreach($previous_accounting_period as $key => $value)
<div class="tab-pane" id="{{ date('Y',strtotime($value->accounting_period_start)) }}">
<div class="row" style="margin-top: 20px;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="filters">
<h3>
<span class="pull-right">
<button class="btn btn-primary btn-sm pr-general-filters" data-toggle="modal" data-target="#pr-general-filters" title="General Filters"><i class="fa fa-filter" aria-hidden="true"></i></button>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#pr-column-filters" title="Column Filters"><i class="fa fa-table" aria-hidden="true"></i></button>
<form method="post" action="/reports/cost-center-report/exportPDF" target="_blank" style="display: inline">
{{ csrf_field() }}
<button type="submit" id="pdf-generator" class="btn btn-warning btn-sm" title="Export to PDF">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</button>
<textarea style="display: none;" name="company_details" class="company-container"></textarea>
<textarea style="display: none" name="pdf_value" id="pr-pdf-container"></textarea>
</form>
<a class="btn btn-danger btn-sm" id="pr-export-csv" title="Export to CSV" target="_blank"><i class="fa fa-file-excel-o" aria-hidden="true"></i></a>
</span>
<br>
</h3>
</div>
</div>
<div class="col-md-12 pr-items-details">
<div class="row">
<div class="col-md-12">
<div class="table-responsive get-cost-center-table">
<table class="table table-hover table-bordered table-sm purchase-requisitions-table" id="transactions">
<thead class="thead-global">
<tr>
<th>TEST</th>
<th>TEST</th>
<th>TEST</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>sss</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
问题：如何放置active和remove类来更改我的表内容？您的脚本工作正常，因为我在我的系统中进行了检查，同时您使用下面的检查，我在您的脚本中做了一些调整
$（文档）。在（“单击”，“会计期间”，功能（e）{
e、 预防默认值（）；
var id=$（this.attr（“id”）；
$（'th#pr_sequence_no_seq1-'+id）.text（id）；
$（'th#pr_sequence_no_seq2-'+id）.text（id）；
if（！$（this）.hasClass（'active'））{
$（“.accounting period.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
}
$（“.tab窗格”）.removeClass（“活动”）；
$（'div.tab-pane#'+id+“-div”）.addClass（“活动”）；
返回false；
});
.active{
背景：红色；
}
-
-
序列号。
序列号。
wew
sss
序列号。
序列号。
fff
sss
您是否尝试过使用'.tab pane#'+id
而不是'.tab pane#'+id
，但没有空格？看起来您正在尝试选择id为的.tab窗格
的子元素，而不是选择id为的.tab窗格
。是。我也试过了。如果（！$（'.tab窗格#'+id）.hasClass（'active'））{$（'.tab窗格#'+id）.removeClass（'active'）；$（'tab窗格#'+id.addClass（'active'））并且它没有工作，我看到了。你能告诉我选择器是否工作吗？例如，如果运行代码或将其记录到控制台，请执行$（'.tab pane#'+id）
或$（'.tab pane#'+id）
返回任何结果（console.log（$（'.tab pane#'+id）
）？是否成功添加了活动的
类？我试图发出警报并显示警报。但它没有将该类添加为活动的。您能帮助我修复我的JSFIDLE吗？这是我第一次使用它。在JSFIDLE中修复了，您的代码段中存在重复id问题，希望有帮助：）
$(".accounting-period").click(function (e) {
var id = this.id;
if(!$(this).hasClass('active'))
{
$(".accounting-period.active").removeClass("active");
$(this).addClass("active");
}
if(!$('.tab-pane #'+id).hasClass('active'))
{
$('.tab-pane #'+id).removeClass("active");
$('.tab-pane #'+id).addClass("active");
}
e.preventDefault();
return false;
});