javascript - 在基于 css 的选项卡结构中打开特定选项卡

Question

有人可以帮我吗？

我有一个基于 CSS 的标签结构。 加载页面时，第一个选项卡是默认选项卡。

我想从其他页面直接链接到带有选项卡和 直接打开非默认选项卡。例如第二个选项卡(id:tabl2)。 非常感谢一些帮助。

链接:http://www.mijncambodja.nl/?link=cambodja-phnom-penh

<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Algemeen</label>
<div id="tab-content1" class="tab-content animated fadeIn">content tab 1
</div>
</li>

<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Bezienswaardigheden</label>
<div id="tab-content2" class="tab-content animated fadeIn">content tab 2
</div>
</li>

<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Hotels</label>
<div id="tab-content3" class="tab-content animated fadeIn">content tab 3
</div>
</li>
</ul>

Answer 1

您可以使用 Javascript 检测加载了哪个选项卡。为此，您必须将选项卡发送到 URL:tab.html#2。然后在 javascript 中使用:location.hash 来检测加载了哪个选项卡。

// displaying the element with ID "tab-content2" if #2
var hash = location.hash.substring(1);
document.getElementById('tab-content' + hash).style.display = 'block';