タブメニューを色変えたい

Question

前回の続き
リンク内容

jqueryを使ってタブメニューを作っています。
選択されたタブの色を変えることはできるのですが
私が実装したいのは選択されていないほうのタブの色を変えたいのです。

解決できないのでお願いします。

本題

まずこの　選択されていないほうのタブの色を変える　についてですが
何から調べればいいかからわかりません。
選択されているやつをCSSで指定することはできるのですが
逆がわからないのです。

左側をタッチしたので左側が赤色に
これを左側をタッチしたら右側が赤色になるようにしたいのです。

<!-- タブメニューのトリガー　　-->
<div class="button">
    <ul>                
        <!-- leftをタッチするとLEFTTABが出ます -->
        <li id="left" class="selected">攻略記事</li>
        <!-- rightをタッチするとRIGHTTABが出ます  -->
        <li id="right">Q&A</li>
    </ul>
</div>    

body{
    margin: 0;
}

.button{
    width: 250px;
    height: 35px;
}

.button ul{
    width: 250px;
    height: 35px;
    padding: 0;
    text-align: center;
}

.button ul li{
     list-style: none;
     width: 124px;
     height: 35px;
     float: left;
     //color: white;
     font-size: 15px;
     line-height: 35px;
}

.selected{
    background-color: red;
}

window.addEventListener("load", function() {
  $(".button li").on("click", function() {
    $("li.selected").removeClass("selected");
    $(this).addClass("selected");
    $(".show div").hide(); // 二つの要素を非表示にする
    $("." + this.id).show(); // クリックされたボタンに対応する要素を表示する
  });
});

selectedクラス（選択されたdiv）が赤くなるようになっています。
最初は Ul li の　id=left　にselectedが割り当てられていますが
id=right　をタッチすると id=left　のクラスが消され
id=rightに　class=selectedが割り当てられるようになっています。

そもそも調べるところからつまづいているので
参考になるリンク　調べ方　解決方法の
いづれかを教えてください。

Comments

[azuapricot]

じゃークリックされた時の処理にselectedがついてないほうのCSSを変えるみたいなふうにしたらいいんじゃないでしょーか。jQueryつかえるんすよね？

[azuapricot]

それかもうleftがクリックされたらrightのスタイルを変えるとかでもいいんじゃないでしょーか。

[m.ts10806]

jQueryのコードはどこでしょうか。

[azuapricot]

というかjQueryほんとに使ってるんでしょうか。大抵解決してる方法CSSですけど・・・
CSSとjQueryはまったくの別物ですがそこらへんは理解していますよね？
jQueryのコードが見当たりませんが少しはやってみましたか？

[m.ts10806]

すごく細かいですが
left、rightという具体的な役割が見えない名前をIDに採用してしまうと後で苦労すると思うので、もう少し意味のある・役割が見える名前を与えてあげてください。

[kazuyakazuya]

Jqueryは初心者です。
IDには気をつけます。
ありがとうございます

[m.ts10806]

>jqueryを使ってタブメニューを作っています
とあるのでほとんどの人はjQueryのコードを期待します。
「コピペで再現できる情報の提示」をなるべく徹底してください（質問は編集できます）

[kazuyakazuya]

了解です

Answer 1

.button ul li { color: 選択されていないときの色; }
.button ul li.selected { color: 選択されているときの色; }

または

.button ul li:not(.selected) { color: 選択されていないときの色; }

「css セレクタ」などで検索するとよいと思います

Comments

[kazuyakazuya]

ありがとうございます！解決できました