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

Question

我想提供一个来自另一个页面的链接 ，该链接打开我的包含这些选项卡的页面以查看其内容，直接说 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>

Answer 1

我能够使用导航标签以我的方式工作。您可以将 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>

在底部添加这个脚本:

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

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