質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2044閲覧

タブ切り替え時にもフェードインを適用したい。

codemanvs

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/12 04:56

タブの切り替え時にもフェードインを適用したいです。

現在、以下のようなメニュー表を作成しており、
それぞれ、タブをクリックするとそれぞれのメニューに切り替わります。
初めのメニューはフェードインで出てくるのですが、
タブをクリックしてメニューを切り替えると、フェードインで出てこなくなってしまいます。

タブを切り替えてもフェードインで出てくるようにしたいので、
アドバイスよろしくお願い申し上げます。

HTML

1 2<section class="container"> 3 4<ul class="tab-menu"> 5 <li><a href="#content-first" class="active">和牛</a></li> 6 <li><a href="#content-second">飲み物</a></li> 7 <li><a href="#content-third">野菜</a></li> 8 <li><a href="#content-fourth">サイド</a></li> 9 <li><a href="#content-fifth">デザート</a></li> 10</ul> 11 12 13 14<div class="contents"> 15<div id="content-first" class="active"> 16 <div class="box"> 17 <div class="box-wrap"> 18 <h2>タン</h2> 19 <table> 20 <tr> 21  <td>薄切りタン塩</td><td>1200円</td> 22 </tr> 23 <tr> 24  <td>薄切りタン塩</td><td>1200円</td> 25 </tr> 26 <tr> 27  <td>薄切りタン塩</td><td>1200円</td> 28 </tr> 29 </table> 30 </div> 31 <img src="img/xxxx.png"> 32 </div><!--box--> 33 34</div><!--content-first--> 35 36 37 38<div id="content-second"> 39 <div class="box"> 40 <div class="box-wrap"> 41 <h2>カルビ</h2> 42 <table> 43 <tr> 44  <td>薄切りタン</td><td>1200円</td> 45 </tr> 46 <tr> 47  <td>薄切りタン塩</td><td>1200円</td> 48 </tr> 49 <tr> 50  <td>薄切りタン塩</td><td>1200円</td> 51 </tr> 52 </table> 53 </div> 54 <img src="img/xxxx.png"> 55 </div><!--box--> 56 57</div><!--content-second-->
.container .tab-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 1140px; margin: 0 auto; padding-top: 105px; padding-bottom: 130px; background-color: black; } .container .tab-menu li { width: 220px; border: 2px solid white; text-align: center; font-size: 20px; list-style: none; } .container .tab-menu a { display: block; padding: 25px 0px; color: white; letter-spacing: 0.45em; text-align: center; -webkit-transition: background-color 0.6s; transition: background-color 0.6s; } .container .tab-menu a:hover { background-color: #B2A168; -webkit-transition: 0.6s; transition: 0.6s; } .container #content-first, .container #content-second, { background-color: #000000; display: none; padding-bottom: 120px; /*box*/ } .container #content-first .box, .container #content-second .box{ display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1140px; width: 100%; margin: 0 auto; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; background-image: url(../img/slash-short.png); background-position: left 80px top 20px; border-collapse: collapse; padding-bottom: 128px; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); /*wrap*/ } .container #content-first .box-wrap h2, .container #content-second .box-wrap h2{ font-size: 57px; } .container #content-first .box-wrap table, .container #content-second .box-wrap table, { letter-spacing: 0.3em; line-height: 50px; } .container #content-first .box-wrap table td, .container #content-second .box-wrap table td { font-size: 24px; padding-right: 40px; } .container #content-first .box img, .container #content-second .box img { width: 480px; height: 270px; } .container #content-first .box-fadein, .container #content-second .box-fadein,{ opacity: 1; -webkit-transition: 2.5s; transition: 2.5s; -webkit-transform: translateY(0px); transform: translateY(0px); } .container .active { display: block; background-color: #B2A168; }

jquery

1 jQuery(function($){ 2 $('.contents > div').hide(); 3 $('.tab-menu a').click(function () { 4 $('.contents > div').hide().filter(this.hash).fadeIn(); 5 6 $('.tab-menu a').removeClass('active'); 7 $(this).addClass('active'); 8 9 return false; 10 }).filter(':eq(0)').click(); 11 }); 12 13 14 $(window).scroll(function (){ 15 $('.box').each(function(){ 16 var elemPos = $(this).offset().top, 17 scroll = $(window).scrollTop(), 18 windowHeight = $(window).height(); 19 if (scroll > elemPos - windowHeight + 40){ 20 $(this).addClass('box-fadein'); 21 } 22 }); 23}); 24

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1.container #content-first .box-fadein, .container #content-second .box-fadein,{ 2 ^ これ

CSSの場合、末尾カンマは文法違反です。

参考
スタイル規則の構文 | CSS リファレンス - CSS: カスケーディングスタイルシート | MDN

投稿2020/06/12 08:50

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

codemanvs

2020/06/14 01:52

初歩的なミスでした。。。すみませんっ!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問