jQuery、もしくはJavaScriptで挙動を制御しようとしております。
やりたいこととしては、よくスマホゲーム等である画面のどこかしらをタップすると画面内の特定の要素が次、次...と変わっていく挙動をウェブサイトにて実装をさせたいと考えております。
最終的にはウェブサイトなので、最後まで行くと最初に戻る仕掛けを追加させ、ループで閲覧が可能な状態に持っていきたいと考えております。
クリックさせ、1番目の要素から2番目の要素に切り替えるところまでは問題なくいけたのですが、再度同じボタンをトリガーとして3番目以降のものを表示させていく方法がググってみたりしているのですが分からず苦心しております。
どなたかご存じの方ご教授いただけますと幸いです。
よろしくお願いいたします。
html5
1 <section id="fixedcontainer" class="pos-r"> 2 <!--- ↓このdivをクリックすることで以下のliに格納されている要素を順に出していくイメージです ---> 3 <div class="touch-area pos-a-area"></div> 4 <div class="story-wrapper pos-a-area"> 5 <ul> 6 <li class="s-section01 active"> 7 section01 8 </li> 9 <li class="s-section02"> 10 section02 11 </li> 12 <li class="s-section03"> 13 section03 14 </li> 15 <li class="s-section04"> 16 section04 17 </li> 18 </ul> 19 </div> 20 </section>
私の方で記述しているjsは下記になります。
javascript
1$(function() { 2 $('.touch-area').click(function(e){ 3 $('.s-section01').removeClass("active"); 4 $('.s-section02').addClass("active"); 5 return false; 6 }); 7});
回答3件
あなたの回答
tips
プレビュー