Q&A
提示されたコードを再現した限りでは想定通りに動作しているようですが、ほかに関係のありそうなcssやjsコードはありませんか。
html
1 <ul> 2 <li><input type="radio" name="btn" id="a" checked="checked">このボタンをクリックするとAAAが表示されます。</li> 3 <li><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</li> 4</ul> 5<div class="text text01">AAA</div> 6<div class="text text02">BBB</div> 7 8
css
1.text { 2 display: none; 3} 4.text01 { 5 display: block; 6} 7
JavaScript
1$(function() { 2 $('[name="btn"]:radio').change( function() { 3 if($('[id=a]').prop('checked')){ 4 $('.text').fadeOut(); 5 $('.text01').fadeIn(); 6 } else if ($('[id=b]').prop('checked')) { 7 $('.text').fadeOut(); 8 $('.text02').fadeIn(); 9 } 10 }); 11});
上記のコードで２つの選択肢のうちどちらかをチェックすると下にそれぞれ「AAA」もしくは「BBB」要素が出るようにしたいのですが
現状AAAがずっと表示された状態になってしまいます。
何か記述が間違っているのでしょうか？
詳しい方何かお力いただけると幸いです。
回答2件
0
ベストアンサー
CSSのみでフェイドアウト、フェイドインアニメーション
html
1<div> 2 <input type="radio" name="btn" id="a" checked="checked"><label for="a">このボタンをクリックするとAAAが表示されます。</label><br> 3 <input type="radio" name="btn" id="b"><label for="b">このボタンをクリックするとBBBが表示されます。</label> 4 <div> 5 <div class="text text01">AAA</div> 6 <div class="text text02">BBB</div> 7 </div> 8</div>
css
1.text { 2 position: absolute; 3 opacity: 0; 4 visibility: hidden; 5 transition: all .3s; 6} 7#a:checked ~ div .text01, 8#b:checked ~ div .text02 { 9 opacity: 1; 10 visibility: visible; 11 transition: all .3s .3s; 12}
投稿2020/12/04 14:11
総合スコア34073
0
姑息な方法でこんな感じ
投稿2020/12/04 09:35
総合スコア116665
<style>
.text{display:none}
[name=btn]{position:absolute;top:-999;}
#a:checked ~ * .text01{display:block;}
#b:checked ~ * .text02{display:block;}
#a:checked ~ * .a.checked{fill:black}
#b:checked ~ * .b.checked{fill:black}
</style>
<input type="radio" name="btn" id="a" checked="checked">
<input type="radio" name="btn" id="b">
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<circle cx="7" cy="7" r="2.5" fill="none" stroke="none" class="a checked" />
<circle cx="7" cy="7" r="5" fill="none" stroke="black" stroke-width="0.8" />
</svg>
<label for="a">このボタンをクリックするとAAAが表示されます。</label></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<circle cx="7" cy="7" r="2.5" fill="none" stroke="none" class="b checked" />
<circle cx="7" cy="7" r="5" fill="none" stroke="black" stroke-width="0.8" />
</svg>
<label for="b">このボタンをクリックするとBBBが表示されます。</label></li>
</ul>
<div>
<div class="text text01">AAA</div>
<div class="text text02">BBB</div>
</div>
早速ありがとうございます！
下記キャプチャのように
https://gyazo.com/84d6a8ad501cbb9fc2ecfd0f08d59ed8
・ラジオボタンが１つしか出現しない。
・一度押すと切り替えはできない
と言う感じで未だ完全解決はできずでした...
自分の方でももっと調べます。
jsだとこう
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[name=btn]').forEach((x1,y1)=>{
x1.addEventListener('click',()=>{
document.querySelectorAll('.text').forEach((x2,y2)=>{
x2.style.display=y1==y2?"block":"none";
});
});
});
document.querySelector('#a').click();
});
</script>
<ul>
<li><label><input type="radio" name="btn" id="a">このボタンをクリックするとAAAが表示されます。</label></li>
<li><label><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</label></li>
</ul>
<div class="text text01">AAA</div>
<div class="text text02">BBB</div>
あなたの回答
tips
プレビュー
