いつもお世話になります。
jQueryを使った yes/noチャートを作成したいのですが、
こちらのサイトと全く同じような動きを想定しています。
サイトのデモ画面では、「前の質問に戻る」というボタンを、一番最初の質問以外の質問画面に設置したいのですが、書き方がわかりません。
検索してみたのですが、「前のページに戻る」の方法しかわからず、どのようなふうに書けばいいのか、教えていただける方がいたら嬉しいです。
よろしくお願いいたします。
javascript
1jQuery.noConflict(); 2(function($) { 3 $(function(){ 4 $(".btn").on("click", function() { 5 $(this).closest("div").css("display","none"); 6 id = $(this).attr("href"); 7 $(id).addClass("positionFit").show("fast"); 8 }); 9}); 10})(jQuery)
html
1<div class="yesno clearfix"> 2 <div id="q_01" class="positionFit"> 3 <p>【質問①】</p> 4 <ul> 5 <li class="even"><a class="btn" href="#q_02">Yes</a></li> 6 <li class="odd"><a class="btn" href="#q_03">No</a></li> 7 </ul> 8 </div> 9 10 <div id="q_02" style="display: none;"> 11 <p>【質問②-1】</p> 12 <ul> 13 <li class="even"><a class="btn" href="#q_04">Yes</a></li> 14 <li class="odd"><a class="btn" href="#q_05">No</a></li> 15 </ul> 16 </div> 17 18 <div id="q_03" style="display: none;"> 19 <p>【質問②-2】</p> 20 <ul> 21 <li class="even"><a class="btn" href="#q_04">Yes</a></li> 22 <li class="odd"><a class="btn" href="#q_05">No</a></li> 23 </ul> 24 </div> 25 26 <div id="q_04" style="display: none;"> 27 <p>【答えA】</p> 28 <ul> 29 <li class="even"><a class="btn" href="#q_01">最初に戻る</a></li> 30 </ul> 31 </div> 32 33 <div id="q_05" style="display: none;"> 34 <p>【答えB】</p> 35 <ul> 36 <li class="even"><a class="btn" href="#q_01">最初に戻る</a></li> 37 </ul> 38 </div> 39</div>
css
1.yesno { 2 height: 400px; 3 position:relative; 4 background: #fff; 5 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); 6 margin:0 0 40px; 7 clear: both; 8 overflow: hidden; 9} 10 11.yesno ul{ 12 overflow: hidden; 13 padding: 0 0 0 25px; 14} 15 16.yesno ul li { 17 list-style:none; 18 float: left; 19 text-align: center; 20 display: block; 21 color: #FFF; 22 background-color: #066; 23 line-height: 200px; 24 font-size: 120%; 25 width: 320px; 26 margin: 0 20px 0 0; 27} 28.positionFit { 29 position:absolute; 30 left: 0px; 31 top: 70px; 32 width: 710px; 33} 34 35.positionFit p{ 36 background: #eee none repeat scroll 0 0; 37 padding: 10px 25px; 38 margin: 0 25px; 39} 40 41.yesno ul li a { 42 background-color: #3498db; 43 color: #fff; 44 display: block; 45 height: 100%; 46 text-decoration: none; 47 width: 100%; 48 font-size: 28px; 49} 50 51.no-bg{ 52 background: #48cc83!important; 53} 54 55.yesno ul li a:hover { 56 background-color: #298dcf; 57} 58 59.yesno .material-icons{ 60 background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; 61 border-radius: 50%; 62 font-size: 30px; 63 padding: 10px 10px 8px; 64 vertical-align: middle; 65 margin: 0 10px 0 0; 66}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。