logo标签列表

点击纯CSS时如何跳转到特定手风琴标签页

htmlcss
3
我有以下代码，用纯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>

2
https://dev59.com/d2w15IYBdhLWcg3wVaQa - Alexander Staroselsky
@AlexanderStaroselsky 纯CSS吗？ - David Kris
这是当前代码的fiddle https://jsfiddle.net/8vwfr1br/ - Huangism
3个回答
0

在 <a> 元素中添加对 #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>

然后在 <div> 元素中添加另一个带有引用名称的 <a> 元素：
<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样式进行一些调整即可。
如果我这样做，手风琴就不再展开。 - David Kris
@ColeGwozdecki 你完全反对使用Javascript吗？ - Sam
我会考虑使用原生JavaScript（不用jQuery） - David Kris
0

编辑：

我没有看到你也问了如何打开手风琴，我之后可能会看一下。

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

然后，在包含内容的

周围添加一个锚点，例如：

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

我在这里添加了一个可用的JSFiddle 链接。

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

0
只需在标签本身周围添加一个锚点标签，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次。我在fiddle中删除了重复的CSS。

那会阻止手风琴展开。 - David Kris
没事，我以前试过这个方法，可以的，不确定为什么现在不行了。 - Huangism
@ColeGwozdecki 实际上不用管了，它是可以工作的，如果你点击文本本身，这意味着你需要更改CSS，使锚点与标签一样高。我在Chrome上测试过了，唯一的小问题是它不能完全对齐到div上。 - Huangism
@ColeGwozdecki 我已经调整了我的答案并附上了一个 fiddle。 - Huangism
哦，我明白了，显然IE11可以打开手风琴但无法滚动。看起来对于IE11，要么打开手风琴而不滚动，要么滚动而不打开手风琴（如果你将锚点放在标签内）。那么你需要使用js。 - Huangism
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接