【发布时间】：2020-08-08 02:30:14
【问题描述】：
理想情况下，这将只使用 HTML/CSS 来完成，但我理解这是否不可行。
我在我的页面上使用标签式窗口，例如this。这（目前）通常通过让每个选项卡成为可以“检查”的输入来完成。
<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">
我也愿意使用输入/收音机以外的东西来构建这些选项卡，如果这样可以更轻松地链接到所述选项卡。
这是一个有效的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>提前感谢您的帮助。
【问题讨论】：
标签： javascript html css tabs anchor