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

Question

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

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

<input checked="checked" type="radio" id="tab 1">

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

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

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

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

<a href="#tab2-anchor">Link to Tab 2</a>

可以跳到这个：

<a name="tab2-anchor"><input type="radio" id="tab2"></a>

但它如何将输入切换为选中状态呢？也许需要一些 JavaScript 来添加/删除它。所以由此可知：

<input checked="checked" type="radio" id="tab1">    
<input type="radio" id="tab2">
<input type="radio" id="tab3">

对此：

<input type="radio" id="tab1">    
<input checked="checked" type="radio" id="tab2">
<input type="radio" id="tab3">

我也愿意使用输入/无线电以外的其他东西来构建这些选项卡，如果这会使链接到所述选项卡更容易的话。

这是一个工作代码笔和下面的功能代码，其中有工作选项卡，但未添加到它们的链接和切换。请注意：我试图清理它，但我对任何混乱表示歉意，因为这是缝合在一起并目前正在开发中。

<input checked="checked" type="radio" id="tab 1">

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

预先感谢您的帮助。

Answer 1

我已将编辑后的 ​​HTML 代码附加到其中。我所做的就是为每个锚标记添加一个 href 属性为其各自的选项卡。因此，“链接到第一个选项卡”将具有 href =“#tab1”，“链接到第二个选项卡”将具有 href =“#tab2”等等，检查此链接以获取结果：https://codepen.io/keidakira /笔/MWywNVx

<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1">Link to First Tab</a></li>
    <li><a href="#tab2">Link to Second Tab</a></li>
    <li><a href="#tab3">Link to Third Tab</a></li>
    <li><a href="#tab4">Link to Fourth Tab</a></li>
  </uL> 
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<input id="tab4" type="radio" name="pct" />  
  <div class="tabs">
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">First Tab</label>
      </li>
      <li class="tab2">
        <label for="tab2">Second Tab</label>
      </li>
      <li class="tab3">
        <label for="tab3">Third Tab</label>
      </li>
      <li class="tab4">
        <label for="tab4">Fourth Tab</label>
      </li>
    </ul>
  </nav>
  </div> 
  
  <div class="tab_container">
  <div class="tab_content">
    
    <div class="tab1">
      <p class="title>">First</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    
    <div class="tab2">
      <p class="title>">Second</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    
    <div class="tab3">
      <p class="title>">Third</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    
    <div class="tab4">
      <h2>Fourth</h2>
      <p> afdadfadfadfad Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
    
  </div>
  </div>
  
</div>
  
<div style="height:1000px;"></div>

您还需要将 JavaScript 代码添加到您的项目中，以便在单击时滚动到选项卡并更改选项卡。所以我添加了以下Javascript

<script>
var tabs = document.getElementsByClassName('tabs')[0];
for(let i = 0; i < 4; i++) {
  document.getElementsByTagName('a')[i].addEventListener('click', function() {
    document.getElementsByTagName('input').checked = false;
    var hrefLink = this.getAttribute("href");
    var isChecked = document.getElementById(hrefLink.split("#")[1]).checked;
    document.getElementById(hrefLink.split("#")[1]).checked = !isChecked;
    tabs.scrollIntoView();
  });
}
</script>

JS (JavaScript) 代码首先将“tabs”元素放入变量中，以便稍后使用它进行滚动。由于有四个选项卡，循环已完成四次。在每个循环中，我向锚标记添加了一个函数，它表示当单击锚标记时，检查它的“href”属性以查看它必须打开哪个选项卡。因此，“首先取消选中所有选项卡，然后检查我按下的唯一选项卡”。这就是代码所说的。稍后，转到我使用该element.scrollIntoView()方法存储在变量中的“tabs”元素。

希望这能回答您的问题。