Question

我在下面有代码，内容循环和右下方的手风琴（均使用Pure CSS创建）。只有css和html可以实现这一点，如果用户点击从循环中选择一个顶级团队，它将针对选择一个顶级团队手风琴选项卡并打开它，与其他选项卡相同吗？任何事都有帮助，欢呼。

＆＃13;

.container1 {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 45px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.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: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.ele:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
  zoom:1.009;
}

.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: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: -3;
  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);
}

.text1line {
  font-size:15px;
  margin-top:14%;
  display:block;
  color:white;
  text-decoration:none;
  text-align:center;
}

.text2line {
  font-size:15px;
  margin-top:6%;
  display:block;
  color:white;
  text-decoration:none;
  text-align:center;
}

.textcircle {
  font-size:17px;
  margin-top:37.5%;
  display:block;
  color:white;
  text-decoration:none;
  text-align:center;
}

.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;
}

＆＃13;

<div class="container1">
  <div class="ele" id="one"><a class="text2line" href="">Select A Top Team</a></div>
    <div class="ele" id="two"><a class="text2line" href="">Get Off To A Great Start</a></div>
    <div class="ele" id="three"><a class="text2line" href="">Train For Success</a></div>
    <div class="ele" id="four"><a class="text2line" href="">Manage Work For Results</a></div>
    <div class="ele" id="five"><a class="text1line" href="">Grow Careers</a></div>
    <div class="ele" id="six"><a class="text2line" href="">Build A Deep Bench</a></div>
    <div class="arrow"></div>
  <div class="circle"><a 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>

＆＃13;

Answer 1

你几乎已经拥有它了。只需将label更改为指向相应复选框的.container1 { width: 250px; height: 250px; position: absolute; top: 45px; left: 0px; right: 0px; margin: auto; } .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: 3px; border-style: solid; border-color: #ededed; border-radius: 7px; box-shadow: 0px 1px 5px #888888; } .ele:hover { cursor:pointer; transform:scale(1.019); border-color:f4f4f4; background-color:#214d84; box-shadow: 0px 2px 9px #888888; zoom:1.009; } .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: #d0d3d8; width: 250px; height: 250px; border: 17px solid; border-radius: 50%; position: absolute; z-index: -3; 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); } .text1line { font-size:15px; margin-top:14%; display:block; color:white; text-decoration:none; text-align:center; } .text2line { font-size:15px; margin-top:6%; display:block; color:white; text-decoration:none; text-align:center; } .textcircle { font-size:17px; margin-top:37.5%; display:block; color:white; text-decoration:none; text-align:center; } .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; }，就像您当前对控件一样。

＆＃13;

<div class="container1">
  <div class="ele" id="one"><label class="text2line" for="tab-one">Select A Top Team</label></div>
    <div class="ele" id="two"><label class="text2line" for="tab-two">Get Off To A Great Start</label></div>
    <div class="ele" id="three"><label class="text2line" for="tab-train">Train For Success</label></div>
    <div class="ele" id="four"><label class="text2line" for="tab-manage">Manage Work For Results</label></div>
    <div class="ele" id="five"><label class="text1line" for="tab-grow">Grow Careers</label></div>
    <div class="ele" id="six"><label class="text2line" for="tab-build">Build A Deep Bench</label></div>
    <div class="arrow"></div>
  <div class="circle"><a 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>

＆＃13;

import React, { Component } from 'react';
import Fetch from 'react-fetch-component';
import OData from 'react-odata';

const baseUrl = 'http://services.odata.org/V4/TripPinService/People';
const query = { filter: { FirstName: 'Russell' } };

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Basic</h1>
        <OData baseUrl={baseUrl} query={query}>
          {({ loading, data, error }) => (
            <div>
              {loading &&  <span>Loading... (()=>{console.log(loading)}) </span>}
              {data && data.value.map((d, i) => <div key={i} id={i}>{d.FirstName}</div>)}
            </div>
          )}
        </OData>        
      </div>
    );
  }

  /* Setup consistent fetch responses */
  componentWillMount() {
    fetch('http://services.odata.org/V4/TripPinService/People')
      .then((response) => response.json())
      .then((responseJson) => {
          return responseJson.value[0].FirstName
      })
      .catch((error) => {console.error(error)});

  }
}

＆＃13;

纯css打开特定的手风琴选项卡

1 个答案: