window.onload = function() { const status = {}; // 指定されたタブを表示 function select_tab(seq) { Array.from(document.querySelectorAll(".panel, .tab")).forEach(e => { e.classList.remove("active"); }); document.querySelectorAll(`#panel-${seq}, #tab-${seq}`).forEach(e => e.classList.add("active")); } // ひとつめのタブを表示 select_tab(1); // 状態を調べて、適切なタブを表示する function check_and_transit() { let tabno = 1; if (status["item_1"] && status["item_2"] && status["item_3"]) { tabno = 2; } if (status["item_4"] && status["item_5"]) { tabno = 3; } select_tab(tabno); } const panel = document.querySelector("#container"); panel.addEventListener("click", ev => { // クリックされた要素の状態を反映 const e = ev.target; if (e.tagName == "INPUT" && e.type == "radio") { status[ e.name ] = true; } else if (e.tagName == "OPTION") { status[ e.parentNode.name ] = e.value != "default"; } // タブ表示 check_and_transit(); }, false); };
<div id="container"> <div class="progress"> <div class="tab" id="tab-1">STEP1</div> <div class="tab" id="tab-2">STEP2</div> <div class="tab" id="tab-3">STEP3</div> </div> <div class="panel" id="panel-1"> <h3>性別</h3> <label><input type="radio" name="item_1" value="1">男性</label> <label><input type="radio" name="item_1" value="2">女性</label> <label><input type="radio" name="item_1" value="3">不明</label> <h3>働き方</h3> <label><input type="radio" name="item_2" value="1">常勤</label> <label><input type="radio" name="item_2" value="2">日勤</label> <label><input type="radio" name="item_2" value="3">非常勤</label> <h3>転職時期</h3> <label><input type="radio" name="item_3" value="1">1ヶ月以内</label> <label><input type="radio" name="item_3" value="2">3ヶ月以内</label> <label><input type="radio" name="item_3" value="3">6ヶ月より先</label> </div> <div class="panel" id="panel-2"> <h3>保有資格</h3> <label><input type="radio" name="item_4" value="1">正看護師</label> <label><input type="radio" name="item_4" value="2">准看護師</label> <label><input type="radio" name="item_4" value="3">助産婦</label> <h3>誕生年</h3> <select name="item_5"> <option value="default">選択してください</option> <option value="2010">2010年</option> <option value="2009">2009年</option> </select> </div> <div class="panel" id="panel-3"> 完了 </div> </div>
.panel { display: none; } .panel.active { display: block; } .tab { display: inline-block; color: silver; border-bottom: 2px solid white; padding: 1px 0.5ex; } .tab.active { color: red; border-bottom: 2px solid red; }