選択タブの色の固定の方法

HPの作成をしており、ページの一部として選択したタブによって表示を切り替える機能をつくっています。
選択したタブによって表示を切り替える機能をつけることはできたのですが、
現在どのタブが選択されているのかわかりやすくしたいので、
選択されているタブの色を選択中に変えるような機能を作りたいです。

色々と調べたのですが、
上手く行かないので方法を教えていただきたいです。
å
現在のコードは以下の通りです。

lang
1
2<div class="product">
3     <ul class="pro_title">
4       <li class="pro1"><input type="radio" name="tabset" id="tabcheck1" checked><a href="javascript:;" onclick="Display('no1')" class="pro_title">商品A</a></li><li class="pro1"><input type="radio" name="tabset" id="tabcheck2"        ><a href="javascript:;" onclick="Display('no2')" class="pro_title">商品B</a></li><li class="pro1"><input type="radio" name="tabset" id="tabcheck3"        ><a href="javascript:;" onclick="Display('no3')" class="pro_title">商品C</a></li>
5     </ul>
6     <div class="p_area">
7       <div id="SW1">
8           <div class="p_image"><p>商品A</p></div>
9         
10       </div>
11 
12       <div id="SW2" style="display:none;">
13           <div class="p_image"><p>商品B</p></div>
14         
15       </div>
16       <div id="SW3" style="display:none;">
17           <div class="p_image"><p>商品C</p></div>
18         
19       </div>
20     </div>
21    </div>
22

lang
1
2function Display(no){
3 
4   if(no == "no1"){
5 
6       document.getElementById("SW1").style.display = "block";
7       document.getElementById("SW2").style.display = "none";
8       document.getElementById("SW3").style.display = "none";
9 
10   }else if(no == "no2"){
11 
12       document.getElementById("SW1").style.display = "none";
13       document.getElementById("SW2").style.display = "block";
14       document.getElementById("SW3").style.display = "none";
15 
16   }else if(no == "no3"){
17 
18       document.getElementById("SW1").style.display = "none";
19       document.getElementById("SW2").style.display = "none";
20       document.getElementById("SW3").style.display = "block";
21 
22   }
23 
24}

行動規範の内容に同意します

回答1件

ベストアンサー

ifブロック内に

document.getElementById("tabcheck1").parentNode.style.backgroundColor = "black";
document.getElementById("tabcheck2").parentNode.style.backgroundColor = "white";
document.getElementById("tabcheck3").parentNode.style.backgroundColor = "white";

を置けば、li要素の背景色が指定した色へ変わります。
(コードの意味は理解できると思うので、同様にelse ifブロック内にも適宜書き換えた物を置いてください。)
初期状態は弄っていないので、選択されないと適用されません。

投稿2018/06/21 14:24