実現したいこと
ページを開いたときにデフォルトのタブを選択した状態にしたい。
前提
WAI-ARIAに従ってHTML上にタブを2つ作成しました。
こちらのページを開いたときにデフォルトで"first_tab01" が表示されるようにしたいです。
html
1<input type="radio" name="cp_tab" id="tab1_1" class="first" aria-controls="first_tab01">2 <label for="tab1_1">総合ランキング</label>3<input type="radio" name="cp_tab" id="tab1_2" class="second" aria-controls="second_tab01">4 <label for="tab1_2">国産</label>5 6<div id="first_tab01" class="cp_tabpanel">7<div id="second_tab01" class="cp_tabpanel">
js
1 function onClickAdd(){2 const tabs = document.querySelectorAll("input[name='cp_tab']");3 tabs.forEach(function(e){4 const getId = e.className;5 e.addEventListener( "click" , function(){6 urlParamSet(getId);7 });8 });9 }10 11 function inputChecked(){12 const params = location.search.split('&');13 const param = params[params.length-1].split('=');14 let target = "";15 if(param[0]){16 target = document.querySelector(`.${param[1]}`);17 urlParamSet(param[1]);18 }else{19 target = document.querySelector('.first');20 urlParamSet('first');21 }22 target.checked = true;23 }24 25 function urlParamSet(getId){26 const links = document.querySelectorAll(".page-link");27 links.forEach(function(e){28 if(e.href){29 const link = e.href;30 const links = link.split('?');31 const url = links[0];32 let param = links[1].split('&');33 const paramLength = param.length;34 param[paramLength-1] = `tab=${getId}`; 35 const changeParam = param.join('&');36 e.href = url + '?' + changeParam;37 }38 });39 }40 onClickAdd();41 inputChecked();```
発生している問題・エラーメッセージ
現状はページを表示したときにはタブのみが表示され、
タブを選択しないとパネルが表示されない状態です。
試したこと
aria-selected、 aria-selectedを試してみましたが
うまくいかず、知見をお伺いできますと幸いです。
補足情報(FW/ツールのバージョンなど)
ruby 2.7.5p203
Rails 6.1.6.1
あまり関係ないかもしれないですが、検索ボックスから検索をした後の画面遷移でデフォルトを設定したいです。
ruby
1 <!-- 検索ボックス -->2 <%= form_tag(foods_path, method: :get) do %> 3 <div class="search-box-ranking">4 <div class="container ">5 <div class="row ">6 <div class="col-md-12">7 <div class="input-group">8 <%= text_field_tag :search, params[:search],class:"form-control",placeholder:"ドッグフードから調べる" %> 9 <span class="input-group-btn">10 <%= submit_tag "検索", :name => nil, class:"btn btn-primary btn-search" %> 11 </span>12 </div>13 </div>14 </div>15 </div>16 </div>17 <% end %>
ここにより詳細な情報を記載してください。
0 コメント