javascript - 试图将链接锚定到选项卡。如何让链接跳转到输入 anchor 并将其标记为已选中？

Question

理想情况下，这将仅使用 HTML/CSS 完成，但我理解这是否不可行。
我在我的页面上使用标签式窗口，例如 this .这(目前)通常通过让每个选项卡成为可以“检查”的输入来完成。

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

现在在我的页面上，顶部还有一个指向 anchor 的目录。
所以假设我有这样的事情:

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

我也愿意使用输入/ radio 以外的东西来构建这些选项卡，如果这样可以更轻松地链接到所述选项卡。
这是一个有效的 codepen并且下面的功能代码具有工作选项卡，但未添加链接和切换到它们。请注意:我试图清理它，但我对任何困惑表示歉意，因为它是拼接在一起的，目前正在开发中。

/* Component Needs */

.pc-tab input,
.pc-tab .tab_content > div {
  display: none;
}

#tab1:checked ~ .tab_container .tab1,
#tab2:checked ~ .tab_container .tab2,
#tab3:checked ~ .tab_container .tab3,
#tab4:checked ~ .tab_container .tab4{
  display: block;
}

#tab1:checked ~ .tabs nav .tab1,
#tab2:checked ~ .tabs nav .tab2,
#tab3:checked ~ .tabs nav .tab3,
#tab4:checked ~ .tabs nav .tab4{
  color: orange;
}

/* Visual Styles */

$activeColor: transparent; /* #ffffff */
$unactiveColor: #eeeeee;
$unactiveHoverColor: red; /* #dddddd */
$offsetHeight: 50px;


*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tab_content div {
  box-sizing: border-box;
  }

body {
  background: #ecf0f1;
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab { 
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  }
  
.pc-tab .tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
.pc-tab .tabs ul li label {  
  font-family: "Raleway";
  float: left;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: /* $unactiveColor */ #eeeeee;
  color: #444;
  }

.pc-tab .tabs ul li label:hover {
  background: /* $unactiveHoverColor */ red;
  }

.pc-tab .tabs ul li label:active {
  background: /* $activeColor */ transparent;
  }
  
.pc-tab .tabs ul li:not(:last-child) label {
  border-right-width: 0; 
  }

.tab_content {
  font-family: "Droid Serif";
  clear: both;
  }
    
.tab_content div {
  padding-top: calc(20px + /* #{$offsetHeight} */ 50px);
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
      
  width: 100%;
  border: 1px solid #ddd;
  /* background: #fff; */
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
  }
  
.tab_content div h2 {
  margin: 0;
  font-family: "Raleway";
  letter-spacing: 1px;
  color: #34495e;
  }

#tab1:checked ~ .tabs nav .tab1 label,
#tab2:checked ~ .tabs nav .tab2 label,
#tab3:checked ~ .tabs nav .tab3 label,
#tab4:checked ~ .tabs nav .tab4 label {
  background: transparent;
  color: #111;
  position: relative;
  }
  
#tab1:checked ~ .tabs nav .tab1 label:after,
#tab2:checked ~ .tabs nav .tab2 label:after,
#tab3:checked ~ .tabs nav .tab3 label:after,
#tab4:checked ~ .tabs nav .tab4 label:after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: $activeColor;
  left: 0;
  bottom: -1px;
  }

label {
  width: calc(100% / 4);
  box-sizing: border-box;
  text-align: center;
  height: /* $offsetHeight */ 50px;
  }

.tab_content .tab1 {
  background-color: pink;
  }

.tab_content .tab2 {
  background-color: lightblue;
  }

.tab_content .tab3 {
  background-color: lightyellow;
  }

.tab_content .tab4 {
  background-color: lightgreen;
  }

.tabs {
  height: 100%;
  display: table;
  width: 100%;
  margin-bottom: -50px; /*-$offsetHeight */
  position: relative;
  }

.tab_container {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
  z-index: -1;
}

.tab_content {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tab_content div {
  height: 100%;
}

<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="">Link to First Tab</a></li>
    <li><a href="">Link to Second Tab</a></li>
    <li><a href="">Link to Third Tab</a></li>
    <li><a href="">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>

预先感谢您的帮助。

Answer 1

您可以使用更少的 javascript 来实现这一点。添加 label在你的链接里面。并在您的标签中添加另一个 id。我添加了 id="tab1_content"例如。然后你应该在点击标签时触发你的链接上的点击事件。

document.querySelectorAll("label").forEach(p => {
  p.addEventListener("click", () => {
    event.target.parentElement.click();
  });
});

/* Component Needs */

a label {
  cursor: pointer;
}

.pc-tab input,
.pc-tab .tab_content>div {
  display: none;
}

#tab1:checked~.tab_container .tab1,
#tab2:checked~.tab_container .tab2,
#tab3:checked~.tab_container .tab3,
#tab4:checked~.tab_container .tab4 {
  display: block;
}

#tab1:checked~.tabs nav .tab1,
#tab2:checked~.tabs nav .tab2,
#tab3:checked~.tabs nav .tab3,
#tab4:checked~.tabs nav .tab4 {
  color: orange;
}


/* Visual Styles */

$activeColor: transparent;

/* #ffffff */

$unactiveColor: #eeeeee;
$unactiveHoverColor: red;

/* #dddddd */

$offsetHeight: 50px;
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tab_content div {
  box-sizing: border-box;
}

body {
  background: #ecf0f1;
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.pc-tab .tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-tab .tabs ul li label {
  font-family: "Raleway";
  float: left;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: /* $unactiveColor */
  #eeeeee;
  color: #444;
}

.pc-tab .tabs ul li label:hover {
  background: /* $unactiveHoverColor */
  red;
}

.pc-tab .tabs ul li label:active {
  background: /* $activeColor */
  transparent;
}

.pc-tab .tabs ul li:not(:last-child) label {
  border-right-width: 0;
}

.tab_content {
  font-family: "Droid Serif";
  clear: both;
}

.tab_content div {
  padding-top: calc(20px +/* #{$offsetHeight} */
  50px);
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  /* background: #fff; */
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}

.tab_content div h2 {
  margin: 0;
  font-family: "Raleway";
  letter-spacing: 1px;
  color: #34495e;
}

#tab1:checked~.tabs nav .tab1 label,
#tab2:checked~.tabs nav .tab2 label,
#tab3:checked~.tabs nav .tab3 label,
#tab4:checked~.tabs nav .tab4 label {
  background: transparent;
  color: #111;
  position: relative;
}

#tab1:checked~.tabs nav .tab1 label:after,
#tab2:checked~.tabs nav .tab2 label:after,
#tab3:checked~.tabs nav .tab3 label:after,
#tab4:checked~.tabs nav .tab4 label:after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: $activeColor;
  left: 0;
  bottom: -1px;
}

label {
  width: calc(100% / 4);
  box-sizing: border-box;
  text-align: center;
  height: /* $offsetHeight */
  50px;
}

.tab_content .tab1 {
  background-color: pink;
}

.tab_content .tab2 {
  background-color: lightblue;
}

.tab_content .tab3 {
  background-color: lightyellow;
}

.tab_content .tab4 {
  background-color: lightgreen;
}

.tabs {
  height: 100%;
  display: table;
  width: 100%;
  margin-bottom: -50px;
  /*-$offsetHeight */
  position: relative;
}

.tab_container {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
  z-index: -1;
}

.tab_content {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tab_content div {
  height: 100%;
}

<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1_content"><label for="tab1">Link to First Tab</label></a></li>
    <li><a href="#tab2_content"><label for="tab2">Link to Second Tab</label></a></li>
    <li><a href="#tab3_content"><label for="tab3">Link to Third Tab</label></a></li>
    <li><a href="#tab4_content"><label for="tab4">Link to Fourth Tab</label></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" id="tab1_content">First Tab</label>
        </li>
        <li class="tab2">
          <label for="tab2" id="tab2_content">Second Tab</label>
        </li>
        <li class="tab3">
          <label for="tab3" id="tab3_content">Third Tab</label>
        </li>
        <li class="tab4">
          <label for="tab4" id="tab4_content">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" id="tab3_content">
        <p class="title>">Third</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="tab4" id="tab4_content">
        <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>