次のような場合にスマートにプログラムを書く方法はありませんか?
次のようにHTMLとCSSがあった場合、
html
1<button id="btnA class="active"">ボタンA</button> 2<button id="btnB">ボタンB</button> 3 4<div id="btnA_display">ボタンAで表示できるもの要素</div> 5<div id="btnB_display class="display_hidden"">ボタンAで表示できるもの要素</div>
css
1.active { 2 background-color: red; 3} 4.display_hidden { 5 display: hidden; 6}
javascript(jQuery)を次のように書くのは冗長だと思うのです。
javascript
1$("#btnA").on('click', function() { 2 $(this).removeClass("active"); 3 $("#btnB").addClass("active"); 4 $("#btnA_display").removeClass("display_hidden"); 5 $("#btnB_display").addClass("display_hidden"); 6}); 7 8$("#btnB").on('click', function() { 9 $(this).removeClass("active"); 10 $("#btnA").addClass("active"); 11 $("#btnA_display").addClass("display_hidden"); 12 $("#btnB_display").removeClass("display_hidden"); 13});
この時のJavascriptの処理をもう少しスマートに書きたいのですが、良い手法はありませんでしょうか?
HTMLとCSSから改善していただいても構いません。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。