Question

因此，我有两个不同的按钮，例如A＆B。我有一个模式-内部有两个选项卡，称为a＆b。我想单击A以打开模态内的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

您可以试试吗？希望这有效;）

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

Answer 2

我认为您已将代码放在.ready函数中，可能工作正常或在准备好文档后致电rebind onclicks：

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

单击不同的按钮可打开不同的选项卡，但在同一模式内

2 个答案: