Q&A
コメント文がだいたい日本語訳になってそうですが、わからないのはどこですか？
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
javascriptのコードの日本語訳をお願い致します。
発生している問題・エラーメッセージ
日本語訳をして、コードの意味を理解したい。html
コード<!DOCTYPE html>
</body> </html>```<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main.js"></script>
css
1コード 2```body { 3 color: #3F4548; 4} 5 6 /* ulのデフォルトスタイルを消去 */ 7.tabs-menu { 8 margin: 0; 9 padding: 0; 10 list-style-type: none; 11} 12 13/* タブの基本スタイル */ 14.tabs-menu li { 15 float: left; 16 margin-right: 8px; 17 margin-bottom: -1px; 18 border-style: solid; 19 border-width: 1px; 20 border-color: transparent; 21 border-radius: 4px 4px 0 0; 22 23 /* 各プロパティをふわっと変える演出 */ 24 transition: all .15s; 25} 26.tabs-menu a { 27 display: block; 28 padding: 10px 20px; 29 color: #557F95; 30 text-decoration: none; 31} 32 33/* 非選択のタブにマウスを乗せたら色を変える */ 34.tabs-menu li:not(.active):hover { 35 border-color: #f0f0f0 #f0f0f0 #999; 36 background-color: #f0f0f0; 37} 38 39/* 選択中のタブ */ 40.tabs-menu .active { 41 border-color: #999 #999 transparent #999; 42 background-color: #fff; 43} 44.tabs-menu .active a { 45 color: #3F4548; 46} 47 48/* タブコンテンツ表示エリア */ 49.tabs-content { 50 clear: both; 51 border: 1px solid #999; 52 border-radius: 0 4px 4px 4px; 53 padding: 10px; 54} 55 56/* 各タブのコンテンツはデフォルトで非表示 */ 57.tabs-content section { 58 display: none; 59 60 61 62 63```javascript 64コード 65```/** 66 * selectorに該当するタブを表示する 67 */ 68const showTab = (selector) => { 69 // 引数selectorの中身をコンソールで確認する 70 console.log(selector); 71 72 // いったん（ひとまず）、すべての.tabs-menu liからactiveクラスを削除する 73 $('.tabs-menu li').removeClass('active'); 74 // .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける 75 $(`.tabs-menu a[href="${selector}"]`) 76 .parent('li') 77 .addClass('active'); 78 79 // いったん、すべての.tabs-content > sectionを非表示にする 80 $('.tabs-content > section').hide(); 81 // .tabs-content > sectionのうち、selectorに該当するものだけを表示する 82 $(selector).show(); 83}; 84 85// タブがクリックされたらコンテンツを表示 86$('.tabs-menu a').on('click', (e) => { 87 // hrefへのページ遷移とを止める 88 e.preventDefault(); 89 90 // hrefの値を受け取ってshowTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu a）を表す 91 const selector = $(e.target).attr('href'); 92 showTab(selector); 93}); 94 95// 初期状態として1番目のタブを表示 96showTab('#tabs-1'); 97エラーメッセージ
該当のソースコード
javascript
1ソースコード/** 2 * selectorに該当するタブを表示する 3 */ 4const showTab = (selector) => { 5 // 引数selectorの中身をコンソールで確認する 6 console.log(selector); 7 8 // いったん（ひとまず）、すべての.tabs-menu liからactiveクラスを削除する 9 $('.tabs-menu li').removeClass('active'); 10 // .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける 11 $(`.tabs-menu a[href="${selector}"]`) 12 .parent('li') 13 .addClass('active'); 14 15 // いったん、すべての.tabs-content > sectionを非表示にする 16 $('.tabs-content > section').hide(); 17 // .tabs-content > sectionのうち、selectorに該当するものだけを表示する 18 $(selector).show(); 19}; 20 21// タブがクリックされたらコンテンツを表示 22$('.tabs-menu a').on('click', (e) => { 23 // hrefへのページ遷移とを止める 24 e.preventDefault(); 25 26 // hrefの値を受け取ってshowTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu a）を表す 27 const selector = $(e.target).attr('href'); 28 showTab(selector); 29}); 30 31// 初期状態として1番目のタブを表示 32showTab('#tabs-1'); 33 34 35### 試したこと 36 37ここに問題に対して試したことを記載してください。 38 39### 補足情報（FW/ツールのバージョンなど） 40 41ここにより詳細な情報を記載してください。
実行される順序など分かりやすく日本語訳してくださると嬉しいです！
質問者さんが質問にアップしたコードは誰か他人が書いたもので、日本語のコメントはあるが質問者さんは全く分からないので、全体を詳しく解説してほしいと言ってますか？ たぶんそんな親切な人はいないと思います。勉強して、自分で考えて、どうしてもわからない部分を質問することをお勧めします。
実行されている順番が知りたいです！
日本語訳は自分で頑張ります！
実行されている順番を回答しましたが、まだ不足がありますか？
回答1件
0
ベストアンサー
1 タブがクリックされたらコンテンツを表示する機能をクリックイベントに設定
2 初期状態として1番目のタブを表示
2-1 引数selectorの中身をコンソールで確認する
2-2 いったん（ひとまず）、すべての.tabs-menu liからactiveクラスを削除する
2-3 .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける
3（タブがクリックされた）
3-1 hrefへのページ遷移とを止める
3-2 hrefの値を受け取ってshowTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu a）を表す
3-2-1 引数selectorの中身をコンソールで確認する
3-2-2 いったん（ひとまず）、すべての.tabs-menu liからactiveクラスを削除する
3-2-3 .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける
こんな感じでいいですか？
投稿2019/09/14 09:20
総合スコア36946
ご丁寧にありがとうございます！
頑張ってみます！
あなたの回答
tips
プレビュー
