单击纯 CSS 时转到特定的手风琴选项卡

【问题标题】：go to specific accordion tab when click pure css单击纯 CSS 时转到特定的手风琴选项卡
【发布时间】：2017-07-20 22:27:21
【问题描述】：

我有下面的代码，用于使用纯 css 制作的循环和手风琴。当您单击循环上的标题时，它会打开指定的手风琴选项卡。如何制作它以打开设计的手风琴选项卡并向下滚动到它但使用纯 CSS？我尝试在标签中添加<a href=""> 标签，但没有奏效。有什么想法吗？干杯。

.container1 {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scale(0.85);
}
.ele,
.arrow,
.circle {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}
#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
    display: inline-block;
    background-color: #1f497d;
    width: 105px;
    height: 50px;
    border-width: 2px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 7px;
    box-shadow: 0px 1px 5px #888888;
    z-index: 3;
}
.ele:hover {
    cursor: pointer;
    transform: scale(1.019);
    border-color: f4f4f4;
    background-color: #214d84;
    box-shadow: 0px 2px 9px #888888;
    zoom: 1.02;
}
.circle {
    background-color: #006850;
    width: 85px;
    height: 85px;
    border-width: 3px;
    border-style: solid;
    border-color: #fefefe;
    border-radius: 50%;
    box-shadow: 0px 1px 5px #888888;
}
.arrow {
    color: #cccfd7;
    width: 250px;
    height: 250px;
    border: 17px solid;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: -17px;
}
#two:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(24deg);
}
#three:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(66deg);
}
#four:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    transform: rotate(25deg);
}
#five:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(26deg);
}
#six:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(66deg);
}
#one:hover ~ .arrow {
    border-color: #006850;
}
#one:hover ~ .circle:after {
    border-top-color: #006850;
}
.circle:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    top: -96px;
    left: -36px;
    background: #fff;
    background-color: white;
    transform: rotate(-120deg);
    z-index: 1;
}
.circle:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #d0d3d8;
    position: absolute;
    top: -83px;
    left: -44px;
    transform: rotate(-120deg);
    z-index: 2;
}
.text1line {
    font-size: 13px;
    margin-top: 14%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text1line:hover {
    text-decoration: none;
}
.text2line {
    font-size: 13px;
    margin-top: 6%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text2line:hover {
    text-decoration: none;
}
.textcircle {
    font-size: 15px;
    margin-top: 37.5%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.textcircle:hover {
    text-decoration: none;
}
.wrapper {
    max-width: 960px;
    margin: 0 auto;
}
/* Acordeon styles */

.tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
}
.bold {
    font-weight: bold;
    color: #005bab;
}
.top {
    margin-top: -20px;
    text-align: center;
    font-size: 13px;
}
.input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.label {
    position: relative;
    text-align: center;
    display: block;
    padding: 0 0 0 1em;
    color: #005bab;
    background: #e2ecf6;
    font-size: 14px;
    font-family: Verdana;
    font-weight: bold;
    line-height: 6;
    cursor: pointer;
}
.label:hover {
    background-color: #d2e2ef;
}
.tab-content {
    max-height: 0;
    overflow: hidden;
    padding: 0px;
    -webkit-transition: max-height .5s;
    -o-transition: max-height .5s;
    transition: max-height .5s;
    padding-left: 35px;
    background: #dce7f2;
}
.tab-content .container {
    padding: 1em;
    margin: 0;
    opacity: 0;
    transform: scale(0.75);
    -webkit-transition: transform 0.75s, opacity .75s;
    -o-transition: transform 0.75s, opacity .75s;
    transition: transform 0.75s, opacity .75s;
    background: #f4f8fc;
}
/* :checked */

.input:checked~.tab-content {
    max-height: 35em;
}
.input:checked~.tab-content .container {
    transform: scale(1);
    opacity: 1;
}
/* Icon */

.label::after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
.input[type=checkbox]+.label::after {
    content: "+";
}
.input[type=radio]+.label::after {
    content: "";
}
.input[type=checkbox]:checked+.label::after {
    transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
    transform: rotateX(180deg);
}
.bottombar {
    content: "";
    display: block;
    height: 1em;
    width: 100%;
    background-color: #00688B;
}
.container1 {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scale(0.85);
}
.ele,
.arrow,
.circle {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}
#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
    display: inline-block;
    background-color: #1f497d;
    width: 105px;
    height: 50px;
    border-width: 2px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 7px;
    box-shadow: 0px 1px 5px #888888;
    z-index: 3;
}
.ele:hover {
    cursor: pointer;
    transform: scale(1.019);
    border-color: f4f4f4;
    background-color: #214d84;
    box-shadow: 0px 2px 9px #888888;
    zoom: 1.02;
}
.circle {
    background-color: #006850;
    width: 85px;
    height: 85px;
    border-width: 3px;
    border-style: solid;
    border-color: #fefefe;
    border-radius: 50%;
    box-shadow: 0px 1px 5px #888888;
}
.arrow {
    color: #cccfd7;
    width: 250px;
    height: 250px;
    border: 17px solid;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: -17px;
}
#two:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(24deg);
}
#three:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(66deg);
}
#four:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    transform: rotate(25deg);
}
#five:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(26deg);
}
#six:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(66deg);
}
#one:hover ~ .arrow {
    border-color: #006850;
}
#one:hover ~ .circle:after {
    border-top-color: #006850;
}
.circle:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    top: -96px;
    left: -36px;
    background: #fff;
    background-color: white;
    transform: rotate(-120deg);
    z-index: 1;
}
.circle:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #d0d3d8;
    position: absolute;
    top: -83px;
    left: -44px;
    transform: rotate(-120deg);
    z-index: 2;
}
.text1line {
    font-size: 13px;
    margin-top: 14%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text1line:hover {
    text-decoration: none;
}
.text2line {
    font-size: 13px;
    margin-top: 6%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text2line:hover {
    text-decoration: none;
}
.textcircle {
    font-size: 15px;
    margin-top: 37.5%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.textcircle:hover {
    text-decoration: none;
}
.wrapper {
    max-width: 960px;
    margin: 0 auto;
}
/* Acordeon styles */

.tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
}
.bold {
    font-weight: bold;
    color: #005bab;
}
.top {
    margin-top: -20px;
    text-align: center;
    font-size: 13px;
}
.input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.label {
    position: relative;
    text-align: center;
    display: block;
    padding: 0 0 0 1em;
    color: #005bab;
    background: #e2ecf6;
    font-size: 14px;
    font-family: Verdana;
    font-weight: bold;
    line-height: 6;
    cursor: pointer;
}
.label:hover {
    background-color: #d2e2ef;
}
.tab-content {
    max-height: 0;
    overflow: hidden;
    padding: 0px;
    -webkit-transition: max-height .5s;
    -o-transition: max-height .5s;
    transition: max-height .5s;
    padding-left: 35px;
    background: #dce7f2;
}
.tab-content .container {
    padding: 1em;
    margin: 0;
    opacity: 0;
    transform: scale(0.75);
    -webkit-transition: transform 0.75s, opacity .75s;
    -o-transition: transform 0.75s, opacity .75s;
    transition: transform 0.75s, opacity .75s;
    background: #f4f8fc;
}
/* :checked */

.input:checked~.tab-content {
    max-height: 35em;
}
.input:checked~.tab-content .container {
    transform: scale(1);
    opacity: 1;
}
/* Icon */

.label::after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
.input[type=checkbox]+.label::after {
    content: "+";
}
.input[type=radio]+.label::after {
    content: "";
}
.input[type=checkbox]:checked+.label::after {
    transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
    transform: rotateX(180deg);
}
.bottombar {
    content: "";
    display: block;
    height: 1em;
    width: 100%;
    background-color: #00688B;
}
<div class="container1">
	<div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
	<div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
	<div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
	<div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
	<div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
	<div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
	<div class="arrow"></div>
	<div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
	<p> 
		<span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span>
	</p>
</div>
<div class="wrapper">
	<div class="tab">
		<input name="tabs" class="input" id="tab-one" type="checkbox"/>
		<label class="label" for="tab-one">Select A Top Team</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-two" type="checkbox" />
		<label class="label" for="tab-two">Get Off To A Great Start</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-train" type="checkbox"/>
		<label class="label" for="tab-train">Train For Success</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-manage" type="checkbox"/>
		<label class="label" for="tab-manage">Manage Work For Results</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-grow" type="checkbox"/>
		<label class="label" for="tab-grow">Grow Careers</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-build" type="checkbox"/>
		<label class="label" for="tab-build">Build A Deep bench</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="bottombar"></div>
</div>

【问题讨论】：

标签： html css


【解决方案1】：

在&lt;a&gt; 元素中添加对#tab-name 的引用

例如：

<div class="ele" id="six"><a href="#tab-build"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></a></div>

然后在 &lt;div&gt; 元素中添加另一个带有引用名称的 &lt;a&gt; 元素：

<div class="tab">
    <a name="tab-build"></a>
    <input name="tabs" class="input" id="tab-build" type="checkbox" />
    <label class="label" for="tab-build">Build A Deep bench</label>
    <div class="tab-content">
        <div class="container">

            <p>Content goes here</p>

        </div>
    </div>
</div>

这不需要 Javascript，您只需对 a 元素的 CSS 样式进行一些调整，这非常简单。

【讨论】：

  • 如果我这样做，手风琴将不再打开
  • @ColeGwozdecki 你是否 100% 反对使用 Javascript？
  • 我会考虑 Vanilla JavaScript（没有 jquery）
【解决方案2】：

编辑：

我没有看到你也问过打开手风琴的问题，我稍后会看看。

首先从圆圈中的标签中删除for属性。

然后只需在包含内容的 div 周围添加一个锚点，例如：

<a href="#tab-one">
  <div class="ele" id="one">
    <label style="color:#fff;" class="text2line">
      Select A Top Team</label>
  </div>
</a>

我添加了一个有效的 JSFiddle right here。

.container1 {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  transform: scale(0.85);
}

.ele,
.arrow,
.circle {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}

#one {
  transform: rotate(0deg) translateY(-130px) rotate(0deg);
}

#two {
  transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}

#three {
  transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}

#four {
  transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}

#five {
  transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}

#six {
  transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}

.ele {
  display: inline-block;
  background-color: #1f497d;
  width: 105px;
  height: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  z-index: 3;
}

.ele:hover {
  cursor: pointer;
  transform: scale(1.019);
  border-color: f4f4f4;
  background-color: #214d84;
  box-shadow: 0px 2px 9px #888888;
  zoom: 1.02;
}

.circle {
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #cccfd7;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: -17px;
}

#two:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(24deg);
}

#three:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(66deg);
}

#four:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  transform: rotate(25deg);
}

#five:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color: #006850;
  transform: rotate(26deg);
}

#six:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color: #006850;
  transform: rotate(66deg);
}

#one:hover ~ .arrow {
  border-color: #006850;
}

#one:hover ~ .circle:after {
  border-top-color: #006850;
}

.circle:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -96px;
  left: -36px;
  background: #fff;
  background-color: white;
  transform: rotate(-120deg);
  z-index: 1;
}

.circle:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: -83px;
  left: -44px;
  transform: rotate(-120deg);
  z-index: 2;
}

.text1line {
  font-size: 13px;
  margin-top: 14%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.text1line:hover {
  text-decoration: none;
}

.text2line {
  font-size: 13px;
  margin-top: 6%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.text2line:hover {
  text-decoration: none;
}

.textcircle {
  font-size: 15px;
  margin-top: 37.5%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.textcircle:hover {
  text-decoration: none;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}


/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}

.bold {
  font-weight: bold;
  color: #005bab;
}

.top {
  margin-top: -20px;
  text-align: center;
  font-size: 13px;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  position: relative;
  text-align: center;
  display: block;
  padding: 0 0 0 1em;
  color: #005bab;
  background: #e2ecf6;
  font-size: 14px;
  font-family: Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}

.label:hover {
  background-color: #d2e2ef;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  padding: 0px;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
  padding-left: 35px;
  background: #dce7f2;
}

.tab-content .container {
  padding: 1em;
  margin: 0;
  opacity: 0;
  transform: scale(0.75);
  -webkit-transition: transform 0.75s, opacity .75s;
  -o-transition: transform 0.75s, opacity .75s;
  transition: transform 0.75s, opacity .75s;
  background: #f4f8fc;
}


/* :checked */

.input:checked~.tab-content {
  max-height: 35em;
}

.input:checked~.tab-content .container {
  transform: scale(1);
  opacity: 1;
}


/* Icon */

.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.input[type=checkbox]+.label::after {
  content: "+";
}

.input[type=radio]+.label::after {
  content: "";
}

.input[type=checkbox]:checked+.label::after {
  transform: rotate(315deg);
}

.input[type=radio]:checked+.label::after {
  transform: rotateX(180deg);
}

.bottombar {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #00688B;
}

.container1 {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  transform: scale(0.85);
}

.ele,
.arrow,
.circle {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}

#one {
  transform: rotate(0deg) translateY(-130px) rotate(0deg);
}

#two {
  transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}

#three {
  transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}

#four {
  transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}

#five {
  transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}

#six {
  transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}

.ele {
  display: inline-block;
  background-color: #1f497d;
  width: 105px;
  height: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  z-index: 3;
}

.ele:hover {
  cursor: pointer;
  transform: scale(1.019);
  border-color: f4f4f4;
  background-color: #214d84;
  box-shadow: 0px 2px 9px #888888;
  zoom: 1.02;
}

.circle {
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #cccfd7;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: -17px;
}

#two:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(24deg);
}

#three:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(66deg);
}

#four:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  transform: rotate(25deg);
}

#five:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color: #006850;
  transform: rotate(26deg);
}

#six:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color: #006850;
  transform: rotate(66deg);
}

#one:hover ~ .arrow {
  border-color: #006850;
}

#one:hover ~ .circle:after {
  border-top-color: #006850;
}

.circle:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -96px;
  left: -36px;
  background: #fff;
  background-color: white;
  transform: rotate(-120deg);
  z-index: 1;
}

.circle:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: -83px;
  left: -44px;
  transform: rotate(-120deg);
  z-index: 2;
}

.text1line {
  font-size: 13px;
  margin-top: 14%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.text1line:hover {
  text-decoration: none;
}

.text2line {
  font-size: 13px;
  margin-top: 6%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.text2line:hover {
  text-decoration: none;
}

.textcircle {
  font-size: 15px;
  margin-top: 37.5%;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
}

.textcircle:hover {
  text-decoration: none;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}


/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}

.bold {
  font-weight: bold;
  color: #005bab;
}

.top {
  margin-top: -20px;
  text-align: center;
  font-size: 13px;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  position: relative;
  text-align: center;
  display: block;
  padding: 0 0 0 1em;
  color: #005bab;
  background: #e2ecf6;
  font-size: 14px;
  font-family: Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}

.label:hover {
  background-color: #d2e2ef;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  padding: 0px;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
  padding-left: 35px;
  background: #dce7f2;
}

.tab-content .container {
  padding: 1em;
  margin: 0;
  opacity: 0;
  transform: scale(0.75);
  -webkit-transition: transform 0.75s, opacity .75s;
  -o-transition: transform 0.75s, opacity .75s;
  transition: transform 0.75s, opacity .75s;
  background: #f4f8fc;
}


/* :checked */

.input:checked~.tab-content {
  max-height: 35em;
}

.input:checked~.tab-content .container {
  transform: scale(1);
  opacity: 1;
}


/* Icon */

.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.input[type=checkbox]+.label::after {
  content: "+";
}

.input[type=radio]+.label::after {
  content: "";
}

.input[type=checkbox]:checked+.label::after {
  transform: rotate(315deg);
}

.input[type=radio]:checked+.label::after {
  transform: rotateX(180deg);
}

.bottombar {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #00688B;
}
<div class="container1">
  <a href="#tab-one">
    <div class="ele" id="one">
      <label style="color:#fff;" class="text2line">
        Select A Top Team</label>
    </div>
  </a>
  <a href="#tab-two">
    <div class="ele" id="two">
      <label style="color:#fff;" class="text2line">Get Off To A Great Start</label>
    </div>
  </a>
  <a href="#tab-train">
    <div class="ele" id="three">
      <label style="color:#fff;" class="text2line">Train For Success</label>
    </div>
  </a>

  <a href="#tab-manage">
    <div class="ele" id="four">
      <label style="color:#fff;" class="text2line">Manage Work For Results</label>
    </div>
  </a>
  <a href="#tab-grow">
    <div class="ele" id="five">
      <label style="color:#fff;" class="text1line">Grow Careers</label>
    </div>
  </a>
  <a href="#tab-build">
    <div class="ele" id="six">
      <label style="color:#fff;" class="text2line">Build A Deep Bench</label>
    </div>
  </a>
  <div class="arrow"></div>
  <div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;" />
<div class="top">
  <p>
    <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span>
  </p>
</div>
<div class="wrapper">
  <div id="firstTab" class="tab">
    <input name="tabs" class="input" id="tab-one" type="checkbox" />
    <label class="label" for="tab-one">Select A Top Team</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-two" type="checkbox" />
    <label class="label" for="tab-two">Get Off To A Great Start</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-train" type="checkbox" />
    <label class="label" for="tab-train">Train For Success</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-manage" type="checkbox" />
    <label class="label" for="tab-manage">Manage Work For Results</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-grow" type="checkbox" />
    <label class="label" for="tab-grow">Grow Careers</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-build" type="checkbox" />
    <label class="label" for="tab-build">Build A Deep bench</label>
    <div class="tab-content">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </div>
  </div>
  <div class="bottombar"></div>
</div>

【讨论】：

    【解决方案3】：

    只需添加一个锚标记，用href="#ID-name" 包裹标签本身

    <div class="ele" id="one"><a class="label-wrapper" href="#tab-one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></a></div>

    CSS

    .text2line {
    font-size: 13px;
    height: 100%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}

    https://jsfiddle.net/8vwfr1br/2/

    我不得不调整一些 CSS 以使锚点和标签的高度相同。您可以使用它，因为它的样式与以前的 tex2line 不同。您可以通过为 text2line 设置 padding top 来轻松修复它

    我认为您可能会将 css 附加两次，因为每个类都重复了 2 次。我删除了小提琴中重复的 css

    【讨论】：

    • 那会阻止手风琴打开
    • 是的，nvm 我以前试过这个，它工作不知道为什么现在不行
    • @ColeGwozdecki 实际上没关系，它确实有效，如果您单击文本本身，这仅意味着您需要更改 css 以使锚点与标签一样高。我在 chrome 上测试过，唯一的小问题是它没有与 div 完全对齐
    • @ColeGwozdecki 我已经调整了答案并附上了小提琴
    • 哦，是的，我明白了，显然 IE11 会打开手风琴，但不会滚动。看起来对于 IE11，它似乎要么打开手风琴而不滚动，要么滚动但不打开手风琴（如果你把锚放在标签内）。然后你将需要js
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-16
    • 1970-01-01
    • 2016-04-04
    • 1970-01-01
    • 1970-01-01
    • 2013-05-27
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode