用香草打開特定的手風琴選項卡JavaScript

-1

我在下面有一個內容循環和一個手風琴正下方的代碼（都是用純CSS創建的）。如果用戶點擊從循環中選擇一個頂級團隊，它將針對選擇一個頂級團隊手風琴選項卡並打開它，並與其他選項卡相同，這是否可以使用Vanilla JavaScript（無jquery）？任何幫助，歡呼。用香草打開特定的手風琴選項卡JavaScript

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

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

來源

2017-07-11 Cole Gwozdecki

哪裏是打開的手風琴的JavaScript？我們也需要這樣做 – sn3ll

@ sn3ll目前全部由純CSS完成 –

，讓您的HTML變化：

<div class="ele" id="one" data-checkbox-id="tab-one"><a class="text2line" href="">Select A Top Team</a></div> 
    <div class="ele" id="two" data-checkbox-id="tab-two"><a class="text2line" href="">Get Off To A Great Start</a></div> 
    <div class="ele" id="three" data-checkbox-id="tab-train"><a class="text2line" href="">Train For Success</a></div> 
    <div class="ele" id="four" data-checkbox-id="tab-manage"><a class="text2line" href="">Manage Work For Results</a></div> 
    <div class="ele" id="five" data-checkbox-id="tab-grow"><a class="text1line" href="">Grow Careers</a></div> 
    <div class="ele" id="six" data-checkbox-id="tab-build"><a class="text2line" href="">Build A Deep Bench</a></div>

請嘗試添加該腳本：

(function() { 
    var currentOpenTab; 
    var elements = document.getElementsByClassName("ele"); 
    for (var i=0; i<elements.length; i++) { 
     elements[i].firstChild.addEventListener("click", elementClicked); 
    } 

    function elementClicked(e) { 
     e.preventDefault(); 
     var targetId = e.target.parentNode.attributes["data-checkbox-id"].value; 
     var checkbox = document.getElementById(targetId); 
     if (checkbox.checked === true) { 
      checkbox.checked = false; 
     } 
     else { 
      checkbox.checked = true; 
      if (currentOpenTab !== undefined) { 
       currentOpenTab.checked = false; 
      } 
      currentOpenTab = checkbox; 
     } 
    } 
}());

來源

2017-07-11 17:19:39 elvirus

什麼都不做 –

對不起，我忘了添加標記更改 – elvirus

這很棒，但你的代碼使圓形箭頭disspear –

-1

下面的工作，但它需要一些絕望的重構。

HTML

<div class="container1"> 
     <div class="ele" id="one" data-item="one">Select A Top Team</div> 
     <div class="ele" id="two" data-item="two">Get Off To A Great Star</div> 
     <div class="ele" id="three" data-item="three">Train For Success</div> 
     <div class="ele" id="four" data-item="four">Manage Work For Result</div> 
     <div class="ele" id="five" data-item="five">Grow Career</div> 
     <div class="ele" id="six" data-item="six">Build A Deep Bench</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 item-one"> 
     <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 item-two"> 
     <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 item-three"> 
     <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 item-four"> 
     <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 item-five"> 
     <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 item-six"> 
     <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>

hideAllTabs(); 

var items = document.querySelectorAll('.container1 .ele'); 

for(var i = 0; items.length > i; i++) { 
    items[i].addEventListener('click', function(evt) { 
     hideAllTabs(); 
     var tabNo = evt.target.getAttribute('data-item'); 
     var tab = document.querySelector('.item-' + tabNo); 

     if (tab) { 
      tab.style.display = 'block'; 
     } 
    }); 
} 

function hideAllTabs() { 
    var tabs = document.querySelectorAll('.tab'); 

    if (tabs.length > 0) { 
     for(var idx = 0; tabs.length > idx; idx++) { 
      tabs[idx].style.display = 'none'; 
     } 
    } 
}

來源

2017-07-11 16:11:39 tjcafferkey

不起作用。標籤應該打開，你的代碼只是讓標題出現。 –

-1

這裏是一個工作示例https://codepen.io/RTakes/pen/WOLbPg

添加一個目標每個循環鏈接：

<div class="ele" id="one"><a class="text2line" href="#tab-one">Select A Top Team</a></div> 
    <div class="ele" id="two"><a class="text2line" href="#tab-two">Get Off To A Great Start</a></div> 
    <div class="ele" id="three"><a class="text2line" href="#tab-train">Train For Success</a></div> 
    <div class="ele" id="four"><a class="text2line" href="#tab-manage">Manage Work For Results</a></div> 
    <div class="ele" id="five"><a class="text1line" href="#tab-grow">Grow Careers</a></div> 
    <div class="ele" id="six"><a class="text2line" href="#tab-build">Build A Deep Bench</a></div>

而且JS：

//Coerce to an array 
const cycleLinks = [].slice.call(document.querySelectorAll('.text2line')); 

cycleLinks.forEach((element, index) => { 
    element.onclick = (event) => { 
    event.preventDefault(); 
    const target = element.href.split("#")[1];  
    //Uncheck all 
    uncheckAll(); 

    //Expand target 
    document.getElementById(target).checked = true; 
    } 

}) 

function uncheckAll() { 
    //Coerce to an array 
    const inputs = [].slice.call(document.querySelectorAll('.input')); 
    inputs.forEach((element, index) => { 
    element.checked = false; 
    }) 
}

來源

2017-07-11 16:26:49 RickTakes

對我不起作用 –

您是否在投票前嘗試了工作代碼範例？ – RickTakes

代碼筆沒有工作什麼heppens –

用香草打開特定的手風琴選項卡JavaScript

回答

相關問題