小编Dav*_*bog的帖子

尝试将链接锚定到选项卡。如何让链接跳转到输入锚点并将其标记为选中?

理想情况下,这只能使用 HTML/CSS 来完成,但我理解这是否不可行。

我在页面上使用选项卡式窗口,如下所示。目前,这通常是通过让每个选项卡成为可以“检查”的输入来完成的。

<input checked="checked" type="radio" id="tab 1">
Run Code Online (Sandbox Code Playgroud)

现在在我的页面上,我的顶部还有一个目录,该目录向下指向一个锚点。

所以假设我有这样的东西:

<li>
  <input checked="checked" type="radio" id="tab1">
  <label class="tab1-label">Tab 1</label>
  <div id="tab1-content">
    <p>This is the content of tab 1.</p>
  </div>
</li>

<li>
  <input type="radio" id="tab2">
  <label class="tab2-label">Tab 2</label>
  <div id="tab2-content">
    <p>This is the content of tab 2.</p>
  </div>
</li>

<li>
  <input type="radio" id="tab3">
  <label class="tab3-label">Tab 3</label>
  <div id="tab3-content">
    <p>This is the content of tab 3.</p>
  </div>
</li>
Run Code Online (Sandbox Code Playgroud)

有没有办法让我从本页顶部的目录链接并跳转到选项卡并在此过程中激活它(将其标记为选中)?我会想象这样的事情:

<a href="#tab2-anchor">Link to Tab 2</a>
Run Code Online (Sandbox Code Playgroud)

可以跳到这个:

<a name="tab2-anchor"><input type="radio" id="tab2"></a>
Run Code Online (Sandbox Code Playgroud)

但它如何将输入切换为选中状态呢?也许需要一些 …

html javascript css anchor tabs

5
推荐指数
1
解决办法
2975
查看次数

标签 统计

anchor ×1

css ×1

html ×1

javascript ×1

tabs ×1