Javascript 如何为使用tabset类构造的特定选项卡提供外部链接？

我想提供另一个页面的链接，打开包含这些选项卡的页面，直接查看，比如tab2的内容。我只是用CSS脚本制作这些标签，没有JS。我正在寻找可以像“mypage/#tab2”这样工作的东西。它现在不起作用。请提出一些建议。我需要一个js文件才能工作吗

    <div class="tabset">
        <!-- Tab 1 -->
        <input type="radio" name="tabset" id="tab1" aria-controls="area1" checked>
        <label for="tab1">Area 1</label>
        <!-- Tab 2 -->
        <input type="radio" name="tabset" id="tab2" aria-controls="area2">
        <label for="tab2">Area 2</label>

        <div class="tab-panels">
          <section id="area1" class="tab-panel">
            <h2>6A. Märzen</h2>
            <p>Overall Impression: An elegant, malty German amber</p>
          </section>
          <section id="area2" class="tab-panel">
            <h2>6B. Rauchbier</h2>
            <p>Overall Impression: Toasty-rich malt in aroma and flavor.</p>
          </section>

一区
区域2
6A。马尔岑
整体印象：优雅、麦芽味的德国琥珀

6B。劳什比尔
总体印象：烤面包富含麦芽的香气和风味

我可以用导航标签按自己的方式工作。您可以将href标记提供给任何要从外部使用mypage/#tab-3链接的选项卡，即，它将直接链接到tab-3面板的内容

<ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-4">Pillowcases</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-2">
                <h5>section B test</h5>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-4">
                <p>Content for tab 4.</p>
            </div>
        </div>

表1的内容

B节试验
表3的内容

表4的内容

在底部添加此脚本：

    <script>
        jQuery(document).ready(function ($) {
            let selectedTab = window.location.hash;
            $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
        })
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

jQuery（文档）.ready（函数（$）{
让selectedTab=window.location.hash；
$（'.nav link[href=“'+selectedTab+'“]”）。触发器（'click'）；
})

---

也许你可以使用css添加样式来修改选项卡面板。这很好，但如果有人擅长css，请在此处添加代码，以帮助我们进行样式设置。

我想不出与直接单击或JavaScript不同的方法来关注选项卡。如果您想使用JavaScript，只需获取url哈希并设置相关选项卡的

checked

属性，