Laravel: Jquery как изменить активный класс на вкладке?

Question

У меня есть вкладка, и это динамически c. Я получаю значения в своей базе данных, затем я использовал их на своей вкладке.

Пример

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-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>

JS

$(".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;
   });

Вопрос: Как активировать и удалить класс, чтобы изменить содержимое таблицы?

Answer 1

Ваш скрипт работает нормально, так как у меня есть проверка в моей системе, а вы проверяете проверку с помощью приведенного ниже, я немного подправил ваш скрипт.

$(document).on("click",".accounting-period",function (e) {
     	e.preventDefault();
        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");
            $(this).addClass("active");

        }
        $(".tab-pane").removeClass("active");
        $('div.tab-pane#'+id+"-div").addClass("active");


        return false;
   });

.active{
    background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills">
	    <li class="nav-item" style="width: 10%">
	        <a class="nav-link accounting-period" id="2020" data-toggle="pill" href="#2020">2020</a>
	    </li>
      <li class="nav-item" style="width: 10%">
	        <a class="nav-link accounting-period" id="2021" data-toggle="pill" href="#2021">2021</a>
	    </li>
</ul>

<div class="tab-pane" id="2020-div">
	    	    <div class="row" style="margin-top: 20px;">
	    	        <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-2020">
	    	                            <thead class="thead-global">
	    	                                <tr>
	    	                                    <th id="pr_sequence_no_seq1-2020">Sequence No.</th>
	    	                                   <th id="pr_sequence_no_seq2-2020">Sequence No.</th>
	    	                                </tr>
	    	                            </thead>
	    	                            <tbody>
	    	                            	<tr>
	    	                            		<td>wew</td>
	    	                            		<td>sss</td>
	    	                            	</tr>
	    	                            </tbody>
	    	                        </table>
	    	                    </div>
	    	                </div>
	    	            </div>
	    	        </div>
	    	    </div>
    	</div>
<div class="tab-pane" id="2021-div">
	    	    <div class="row" style="margin-top: 20px;">
	    	        <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-2021">
	    	                            <thead class="thead-global">
	    	                                <tr>
	    	                                    <th id="pr_sequence_no_seq1-2021">Sequence No.</th>
	    	                                   <th id="pr_sequence_no_seq2-2021">Sequence No.</th>
	    	                                </tr>
	    	                            </thead>
	    	                            <tbody>
	    	                            	<tr>
	    	                            		<td>fff</td>
	    	                            		<td>sss</td>
	    	                            	</tr>
	    	                            </tbody>
	    	                        </table>
	    	                    </div>
	    	                </div>
	    	            </div>
	    	        </div>
	    	    </div>
    	</div>