jquery - 如何使用 Bootstrap 4 将主选项卡重定向到嵌套选项卡？

Question

我正在处理选项卡，当我重定向选项卡时遇到问题。我需要在单击主选项卡时重定向嵌套选项卡这可能吗？

我的脚本

    $(".parentTabs a.nav-link").on("click", function () {
    alert();
        var curId = $(this).attr("href");
        $(".tab-pane").removeClass("active show");
        $(".nav-justified .nav-link").removeClass("active");
        $(".tab-pane" + curId).addClass("active show");
    });

    $(".chieldTabs a.chield-nav").on("click", function () {
        $(".chieldTabs a.chield-nav").removeClass("active show");
        $(this).addClass("active");
        var curId = $(this).attr("href");
        $(".sub_tab_active").removeClass("active show");
        $(".tab-pane" + curId).addClass("active show");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="tabbable boxed parentTabs">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#set1" class="nav-link">Dashboard</a>
                            </li>
                            <li><a href="#set2" class="nav-link">Payment</a>
                            </li>
                            <li><a href="#sub22" class="nav-link">Cash</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="set1">
                                <h2>Dashboard</h2>
                            </div>
                            <div class="tab-pane fade" id="set2">
                                <div class="tabbable chieldTabs">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a class="chield-nav" href="#sub21">Cash</a>
                                        </li>
                                        <li><a class="chield-nav" href="#sub22">OnHand</a>
                                        </li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div class="tab-pane fade sub_tab_active" id="sub21">
                                            <h2>Cash</h2>
                                        </div>
                                        <div class="tab-pane fade sub_tab_active" id="sub22">
                                            <h2>OnHand</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="set3">
                                <h2>OhHand</h2>
                            </div>
                        </div>
                    </div>

我在用着Bootstrap 4

在这里，我设置了我的问题的示例，请检查一个。我需要在单击主现金选项卡时重定向 OnHandTab

这是我的标签的达摩，我需要OnhandTab在点击时重定向Parent Cash Tab它是可能的吗？谢谢你

标签： jquerylaravelbootstrap-4tabs