Различные кнопки при нажатии открывают другую вкладку, но внутри одного модального

Question

Итак, у меня есть две разные кнопки, например, A & B. У меня есть один модал, внутри которого есть две вкладки, называемые a & b. Я хочу щелкнуть A, чтобы открыть вкладку внутри модала, а нажатие кнопки B должно открыть вкладку b внутри того же модала.

<script>
$("#loginBtn").on('click', function () {
 $('.nav-tabs a[href="#details_{{$offer->id}}"]').tab('show');
})
$("#regBtn").on('click', function () {
 $('.nav-tabs a[href="#tnc_{{$offer->id}}"]').tab('show');               
})
</script>

<div class="pp-offer-btn">
                        @if($offer->offer_full_description != null)
                        <button class="btn btn-primary" data-toggle="modal" style="cursor:pointer" id="loginBtn" data-target="#offerDetails_{{$offer->id}}">Details</button>
                        @endif
                        <button class="btn btn-primary" data-toggle="modal" style="cursor:pointer" id="regBtn" data-target="#offerDetails_{{$offer->id}}">T&C</button> 
                    </div>
                    <div class="modal" id="offerDetails_{{$offer->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;</button>
                                    <h4 class="modal-title" id="myModalLabel">
                                    partner name
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <!-- Nav tabs -->
                                            <ul class="nav nav-tabs">
                                                <li id="loginLi"><a href="#details_{{$offer->id}}" data-toggle="tab">Details</a></li>
                                                <li id="RegLi"><a href="#tnc_{{$offer->id}}" data-toggle="tab">T&C</a></li>
                                            </ul>
                                            <!-- Tab panes -->
                                            <!--LOGIN TAB -->
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="details_{{$offer->id}}">
                                                    <div class="modal-body" style="padding-left: 2em;">
                                                        {!! html_entity_decode($offer->offer_full_description) !!}
                                                    </div>
                                                    <div id="tabloginMsg"></div>
                                                </div>
                                                <div class="tab-pane" id="tnc_{{$offer->id}}">
                                                    <div class="modal-body" style="padding-left: 2em;">
                                                        {!! html_entity_decode($offer->tnc) !!}
                                                    </div>
                                                    <div id="tabregMsg"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Я искал переполнение стека для похожих проблем и нашел одну, но она глючит https://jsfiddle.net/a5voyotu/ Это служит моей цели, но вырезание модального режима и нажатие на кнопки показывают неправильное тело вкладок.

Answer 1

Я думаю, что вы помещаете код в функцию .ready, которая может нормально работать, или вызываете повторные клики, когда документ готов:

<script>
    $( document ).ready(function() {
      $("#loginBtn").on('click', function () {
         $('.nav-tabs a[href="#details_{{$offer->id}}"]').tab('show');
       });
      $("#regBtn").on('click', function () {
         $('.nav-tabs a[href="#tnc_{{$offer->id}}"]').tab('show');               
      });

    });
</script>

Answer 2

Можете ли вы попробовать это?Надеюсь, что это работает;)

$("#loginBtn").on('click', function () {
    $('.nav-tabs a[href="#Login"]').tab('show');
})
$("#regBtn").on('click', function () {
    $('.nav-tabs a[href="#Registration"]').tab('show');               
})