<ul class="photo_title">は最初は非表示にする。
例えば「練習風景」をクリックしたら<ul class="photo_title">部分の練習風景を表示したいのですが、上手くできません。
わかられる方ご回答をお願い致します。
また、例えば<ul class="tab">の練習風景を2回クリックすると最初の画面に戻ってします。
2回クリック後も維持したい場合はどのように記述すればいいでしょうか。
JS
1$(function(){ 2 3 $("#photo_gallery .tab li").click(function() { 4 var tags = $(this).attr('class'); 5 $("#photo_gallery .tab li").removeClass('select'); 6 $(this).removeClass('select'); 7 8 $("ul.photo li").hide(); 9 if(tags == 'practice_scenery_') { 10 $("ul.photo li.practice_scenery").fadeIn(300); 11 12 } else if(tags == '20180620_') { 13 $("ul.photo li.20180620").fadeIn(300); 14 15 } else if(tags == 'off-shot_') { 16 $("ul.photo li.off-shot").fadeIn(300); 17 18 } else if(tags == 'match_scenery_') { 19 $("ul.photo li.match_scenery").fadeIn(300); 20 21 } else { 22 $("ul.photo li").fadeIn(300); 23 } 24 }); 25 /*タブ切替*/ 26 $("#photo_gallery .tab li").addClass('active').show(); 27 $("#photo_gallery .tab li").click(function() { 28 $("#photo_gallery .tab li").removeClass('active'); 29 $(this).addClass('active'); 30 var activeTab = $(this).find('a').attr('href'); 31 $(activeTab).fadeIn(); 32 return false; 33 }); 34 35}); 36</script> 37
CSS
1div#photo_gallery { 2 clear: both; 3 overflow: hidden; 4} 5div#photo_gallery .btn_detail { 6 background: #fff; 7 padding: 20px; 8 margin: 30px 0; 9 text-align: center; 10 border: 1px solid #fff; 11 color: #e79c37; 12} 13div#photo_gallery ul.tab { 14 padding: 15px; 15 text-align:center; 16 overflow: hidden; 17 background: #fdb95e; 18} 19div#photo_gallery ul.tab li { 20 color: #000; 21 margin: 0; 22 float: left; 23 letter-spacing: 1; 24 padding: 5px 45px; 25 cursor: pointer; 26} 27div#photo_gallery ul.tab li.active { 28 background: #cc7500; 29 color: #fff; 30} 31div#photo_gallerys { 32} 33div#photo_gallerys ul.photo_s { 34 margin: 10px 0 0px; 35 overflow: hidden; 36} 37div#photo_gallerys ul.photo_s li { 38 float: left; 39 width: 24%; 40 margin: 0 4px 12px; 41} 42div#photo_gallerys ul.photo_s li img { 43 width: 100%; 44}
HTML
1<div id="photo_gallery" class="clearfix"> 2<ul class="tab"> 3<li class="practice_scenery_ select">#練習風景</li> 4<li class="20180620_">#20180620</li> 5<li class="off-shot_">#オフショット</li> 6<li class="match_scenery_">#試合風景</li> 7</ul> 8<div id="photo_gallerys" class="clearfix"> 9<ul class="photo_title"> 10<li class="practice_scenery">#練習風景</li> 11<li class="20180620">#20180620</li> 12<li class="off-shot">#オフショット</li> 13<li class="match_scenery">#試合風景</li> 14</ul> 15<!-- フォト抜き出し--> 16<ul class="photo photo_s"> 17<li class="practice_scenery">2018.06.18</li> 18<li class="20180620">2018.06.18</li> 19<li class="off-shot">2018.06.18</li> 20<li class="off-shot">2018.06.18</li> 21</ul> 22</div> 23</div>
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
photo_galleryおよびphoto_gallerysの閉じ</div>がないように見受けられます。転記漏れでしょうか
「practice_scenery_」に「select」クラスがあるので確認したいのですが、タブ切り替えのような機能なのでしょうか?再現確認や回答のために必要となるのでCSSも提示された方が良いかもしれません。
ご回答ありがとうございます。CSS追加します。
少し先走りで回答してみます。齟齬がありましたらご指摘ください。寄せていきますので。
タブ機能で切り替えるようにしています。
CSSを追記しました。
CSSを追記しました。
追記ありがとうございます。ただ、コードブロック対応(私の最初のコメント)もお願いしますね。このままだとコードハイライトがないので読みづらいですし、再現確認のためのコピーがかなり面倒です。(回答がつきにくい原因となります)
すみません。修正が完了しました。
```js ```css ```html など冒頭に言語名つけると言語にそくしたハイライトがつくのでお手数でなければご対応ください。(私の回答参照 あとコードブロックで使える言語一覧→ https://teratail.com/questions/7119)
修正完了しました。
調整ありがとうございます。