要素選択すると、他の要素が変わる

Question

選択前はこのように全てのボタンがアクティブ状態です。
menu1を選択すると、current付与、他のボタンに透明度.5を付与したいのですが、どうすればいいでしょうか。

選択前

<ul>
	<li>
		<a href="#">menu1</a>
	</li>
	<li>
		<a href="#">menu2</a>
	</li>
	<li>
		<a href="#">menu3</a>
	</li>
</ul>

選択後

<ul>
	<li>
		<a href="#" class="current">menu1</a>
	</li>
	<li>
		<a href="#">menu2</a>
	</li>
	<li>
		<a href="#">menu3</a>
	</li>
</ul>

Comments

[x_x]

見た目の変更だけではなく、要素までも変更する必要がありますか？

[takesu]

考え直してみまして、要素が変更しない場合の質問に変更させていただきました。

Answer 1

いまのHTMLの構造でCSSだけでaのスタイルを書き換えるのは不可能です。

私ならこうします。

<!--選択前-->
<ul class="menu-list"><!-- メニュー全体にmenu-listというクラスを付与 -->
    <li>
        <a href="#">menu1</a>
    </li>
    <li>
        <a href="#">menu2</a>
    </li>
    <li>
        <a href="#">menu3</a>
    </li>
</ul>

<!--選択後-->
<ul class="menu-list selected"><!-- 選択後はselectedも付与 -->
    <li>
        <a href="#" class="current">menu1</a>
    </li>
    <li>
        <a href="#">menu2</a>
    </li>
    <li>
        <a href="#">menu3</a>
    </li>
</ul>

.menu-list.selected a:not(.current) {
  opacity:0.5;
}

Comments

[takesu]

おお！この手がありましたか。勉強になりました！ありがとうございます。
ただ、すみません質問を修正しまして、要素は変わらない場合でもできるようにしたいのですが、方法をご存知でしょうか。

[masaya_ohashi]

修正してみました。

[takesu]

早速の修正をありがとうございます！

Answer 2

アンカー(aタグ)をクリックするとpに変化するということは
他のアンカーをクリックするとpがaに戻らないといけません。
そうなると元のaについていた属性をとっておかないといけないので
そこそこ面倒です。アンカーはアンカーのままでよいのでは？

とりあえずわかりやすくするためulはmenuというidで管理するものとします。

.uncurrent{opacity:0.5;}

$(function(){
  $('#menu a').on('click',function(){
    $(this).removeClass('uncurrent').closest('li').siblings().find('a').addClass('uncurrent');
  });
});

<ul id="menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>

Comments

[takesu]

ありがとうございます！できました！jsも記載いただきましたのでこちらをベストアンサーとさせていただきました。