直接链接到 CSS 选项卡

Question

我想弄清楚如何让某人直接 link 到我页面上的 CSS 选项卡，但给他们 pagename.html#tab2 不起作用。如果没有脚本就可以做到这一点，那将是最好的，但我现在对任何事情都持开放态度。顺便说一句，随意撕开我的代码！我只是在学习如何执行此操作，因此它可能没有应有的效率！谢谢！

/* Tabs */

input  /*hide radio buttons */
{
  display: none;
}

input+label  /* show labels in line */
{
  display: inline-block;
  font-size: 1.3em;
}

input~.tab  /* show contents only for selected tab */
{
  display: none;
}

#tab1:checked~.tab.content1,
#tab2:checked~.tab.content2 {
  display: block;
}

input+label {
  border: 1px solid #999;
  background: #101010;
  padding: 4px 12px;
  border-radius: 6px 6px 0 0;
  position: relative;
  top: 1px;
}

input+label:hover {
  background: #212121;
}

input:checked+label {
  background: transparent;
  border-bottom: 2px solid #292929;
}

input~.tab {
  border-top: 1px solid #999;
  padding: 12px;
}

<div style="background-color: #292929;color: #b2b2b2;line-height: 1.5em;font-family: Mulish,sans-serif;">
  <input type="radio" name="tabs" id="tab1" checked="checked" />
  <label for="tab1">Tab 1</label>
  <input type="radio" name="tabs" id="tab2" />
  <label for="tab2">Tab 2</label>
  <div class="tab content1">
    <p>Tab content 1</p>
  </div>
  <div class="tab content2">
    <p>Tab content 2</p>
  </div>
</div>

Answer 1

如果您指定

<input type="radio" name="tabs" id="tab1" checked />

那么这个单选按钮将在页面加载时默认被选中。如果你想检查另一个选项卡，你可以通过从 URL 获取哈希然后像这样以编程方式检查它来做到这一点

<script>
// this will be #tag2 in your case
let hash = document.location.hash;

// remove the hash sign
hash = hash.slice(1, hash.length);

let tab = document.getElementById( hash );

// check the required input element
tab.setAttribute('checked', 'checked');

</script>

您会希望在正文末尾附近包含此脚本，在输入元素加载完毕之后。

Answer 2

使用

scrollIntoView()

查看此文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

希望对您有所帮助

直接链接到 CSS 选项卡

Linking directly to a CSS tab

html

css

tabs

hyperlink