ボタンをクリックするとアコーディオンタブに移動します。バニラJavaScript

今、純粋なCSSを使用して作成したアコーディオンとインタラクティブなサイクルがあります。ユーザーがサイクルの特定のボックスをクリックすると、その特定のアコーディオンタブが開きます。ユーザーがサイクルでボックスをクリックすると、それを特定のタブまでスクロールさせるために、バニラJavaScript（JQueryなし）を使用することは可能ですか？何でも助けてくれる、歓声。ボタンをクリックするとアコーディオンタブに移動します。バニラJavaScript

.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"> 
 
\t <div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div> 
 
\t <div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div> 
 
\t <div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div> 
 
\t <div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div> 
 
\t <div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div> 
 
\t <div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div> 
 
\t <div class="arrow"></div> 
 
\t <div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div> 
 
</div> 
 
<br style="line-height:400px;"/> 
 
<div class="top"> 
 
\t <p> 
 
\t \t <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> 
 
\t </p> 
 
</div> 
 
<div class="wrapper"> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-one" type="checkbox"/> 
 
\t \t <label class="label" for="tab-one">Select A Top Team</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-two" type="checkbox" /> 
 
\t \t <label class="label" for="tab-two">Get Off To A Great Start</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-train" type="checkbox"/> 
 
\t \t <label class="label" for="tab-train">Train For Success</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-manage" type="checkbox"/> 
 
\t \t <label class="label" for="tab-manage">Manage Work For Results</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-grow" type="checkbox"/> 
 
\t \t <label class="label" for="tab-grow">Grow Careers</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tab"> 
 
\t \t <input name="tabs" class="input" id="tab-build" type="checkbox"/> 
 
\t \t <label class="label" for="tab-build">Build A Deep bench</label> 
 
\t \t <div class="tab-content"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <p>Content goes here</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="bottombar"></div> 
 
</div>

出典

2017-07-20 Cole Gwozdecki

私が理解している場合は、特定のdivにフォーカスを取得するイベントリスナーを作成するためにjavascriptを使用したいですか？ –

ええ、サイクルで「トップAチームを選ぶ」をクリックすると、「トップAチームを選ぶ」タブにスクロールします。サイクルで「A Deep Bench」を選択すると、「Build A Deep Bench」アコーディオンタブなどにスクロールします。 ... –

この質問は[あなたの最後のものとはどう違う]（https://stackoverflow.com/questions/45089258/go-to-specific-accordion-tab-when-click-pure-css）ですか？ – j08691

使用document.getElementById("button_id").addEventListener("click", function);トリガー用。

window.location.hash = '#div_id';を使用してフォーカスを取得します。

例：

document.getElementById("bt1").addEventListener("click", getfocus1); 
 
document.getElementById("bt2").addEventListener("click", getfocus2); 
 
document.getElementById("bt3").addEventListener("click", getfocus3); 
 
document.getElementById("bt4").addEventListener("click", getfocus4); 
 
document.getElementById("bt5").addEventListener("click", getfocus5); 
 
function getfocus1(){ 
 
    window.location.hash = '#tab1'; 
 
} 
 
function getfocus2(){ 
 
    window.location.hash = '#tab2'; 
 
} 
 
function getfocus3(){ 
 
    window.location.hash = '#tab3'; 
 
} 
 
function getfocus4(){ 
 
    window.location.hash = '#tab4'; 
 
} 
 
function getfocus5(){ 
 
    window.location.hash = '#tab5'; 
 
}

div{ 
 
width:100%; 
 
height:300px; 
 
text-align: center; 
 
}

<button type="button" id = "bt1">Click Me for get focus in div 1!</button> 
 
<button type="button" id = "bt2">Click Me for get focus in div 2!</button> 
 
<button type="button" id = "bt3">Click Me for get focus in div 3!</button> 
 
<button type="button" id = "bt4">Click Me for get focus in div 4!</button> 
 
<button type="button" id = "bt5">Click Me for get focus in div 5!</button> 
 
<div id ="tab1"> 
 
    Data 1 
 
</div> 
 
<div id ="tab2"> 
 
Data 2 
 
</div> 
 
<div id ="tab3"> 
 
Data 3 
 
</div> 
 
<div id ="tab4"> 
 
data 4 
 
</div> 
 
<div id ="tab5"> 
 
data 5 
 
</div>

私は、これはあなたが望むものであると思います。

出典

2017-07-20 15:20:44

完璧、歓声の仲間！ –

ボタンをクリックするとアコーディオンタブに移動します。バニラJavaScript

答えて

関連する問題