我想提供一个来自另一个页面的链接 ,该链接打开我的包含这些选项卡的页面以查看其内容,直接说 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>
最佳答案
我能够使用导航标签以我的方式工作。您可以将 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,请在此处添加您的代码以帮助我们进行样式设置。
关于javascript - 如何为使用 tabset 类构建的特定选项卡提供外部链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66585716/