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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

5367閲覧

タブの切り替え、選択中のタブと内容を区別して表示させたい。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/06/15 14:54

編集2017/06/18 13:45

###選択中のタブと内容を区別して表示させたい。
別のページで「別ページから飛んで来たとき、タブを切り替えて表示させたい」、と質問で投げていますが、この方法と別のやり方で、タブの切り替えができました。

しかし、これはこれでまた別の問題が2つ発生しました。
①classが追加されません。
選択中のタブをわかりやすくするために、クラスを追加する記述をしましたが、classがされませんでした。
②選択した内容以外を非表示にしたい。
選択中のタブに合わせた内容のみ表示させたいので、その他は非表示にしたい。

HTMLの記述が悪いのか?jsの記述が悪いのか?
どこが、問題でしょうか?

###実装例
別ページから飛んで来たとき、タブを切り替えて表示されることは、できました。

HTML

1<!-- タブ --> 2<ul class="navi_wrap clearfix"> 3 <li class="tab01"> <a href="#box01">メニュー01</a> </li> 4 <li class="tab02"> <a href="#box02">メニュー02</a> </li> 5 <li class="tab03"> <a href="#box03">メニュー03</a> </li> 6</ul> 7<!-- 内容 --> 8<div class="box_wrap"> 9 <div id="box01" class="box_text"> 10 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 11 <div id="box02" class="box_text"> 12 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 14 <div id="box03" class="box_text"> 15 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 16 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 17 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 18 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 19</div>

css

1/*タブ*/ 2ul.navi_wrap li{ 3 float: left; 4 background: #ccc; 5 border: 1px solid #000; 6 padding: 5px; 7 text-align: center; 8} 9/*内容*/ 10.box_wrap{ 11 width: 500px; 12 height: 150px; 13 border: 1px solid #000; 14 overflow-x: hidden; 15 overflow-y: auto; 16} 17.box_wrap .box_text{ 18 padding: 5px 10px; 19} 20#box01{background: #9BFF90;} 21#box02{background: #FB9F60;} 22#box03{background: #56F5FD;} 23.box_wrap p{margin-bottom: 10px;}

javascript

1$(document).ready(function() { 2 initPage(); 3 codeSanitizing(); 4 5 // タブ-クリック表示 6 $('.navi_wrap a').on('click', function(e) { 7 e.preventDefault(); 8 $(this).tab('show'); 9 }); 10 11 // ページ外-クリック 12 var hashTabName = document.location.hash; 13 if (hashTabName) { 14 $('.navi_wrap a[href=' + hashTabName + ').tab('show'); 15 }

###問題①classが追加されません。
目的としては、
現在選択しているタグを分かりやすくするために、デザインを変える記述を追加すること。
その方法として、選択したタグにclassを追加させたいのですが、以下の方法では、classが追加されませんでした。

css

1ul.navi_wrap li a.active{ 2 font-weight: bold; 3 color: #fff; 4} 5```選択中のデザインを変える記述をcssに追記 6 7```javascript 8 // タブ-クリック表示 9 $('.navi_wrap a').on('click', function(e) { 10 e.preventDefault(); 11 $(this).tab('show').addClass('active'); 12 }); 13```$(this).tab('show') の後に .addClass('active')を追加。 14これで、classが追加されると思いきや、追加されません! 15 16もちろんこの後、 17ifを用いて、classの追加・削除を記述しなければ、選択中のみの表示を変えることができませんが、classを追加する部分でつまずいていましました。 18 19なぜclassが追加されないのでしょう? 20 21###②選択した内容以外を非表示にしたい。 22問題①の方で、class追加が実装できれば、こちらも簡単にできそうな気がしますが、、、 23問題①でつまずいているため、こちらがまったくできません。 24 25classの追加・削除以外で、コントロールできる方法があれば、アドバイスがほしいです。

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

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

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

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

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

m.ts10806

2017/06/15 22:04

「選択中のデザインを変える記述」はどこに書いていますか?
退会済みユーザー

退会済みユーザー

2017/06/18 13:39

「問題①classが追加されません。」のCSSが、選択中のデザインです。jsで、クラスの追加・削除で切り替えようと思っています。
kanimaru

2017/06/18 22:54

$(this).tab('show') この tabって関数定義jQueryには定義無いと思いますが、何かjQueryの拡張ライブラリを読み込んでいらっしゃるのでしょうか。そのまま使うと、tabの関数定義が無くエラーとなると思います。
退会済みユーザー

退会済みユーザー

2017/06/19 14:33

jQuery以外に読み込んでいるライブラリは、ありません。 なにか読み込むべきなのでしょうか?
guest

回答2

0

動作しない理由:
イベントを付与するセレクタに対応するHTML記述が存在しないため。
class navi_wrap の子孫要素に1つもaはありません。

また、[.tab("show")]なんてjQueryにはなかったと思います。
jQuery-uiに tabs はありますが、このような使い方ではなかったかと。

もしjQuery以外にも読み込んでいるライブラリなどあるなら、そのライブラリ名
も質問内容に記載してください。

javascript

1 // タブ-クリック表示 2 $('.navi_wrap a').on('click', function(e) { 3

html

1<ul class="navi_wrap clearfix"> 2 <li class="tab01">メニュー01</li> 3 <li class="tab02">メニュー02</li> 4 <li class="tab03">メニュー03</li> 5</ul>

投稿2017/06/15 22:53

kanimaru

総合スコア1013

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

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

退会済みユーザー

退会済みユーザー

2017/06/18 13:53

>class navi_wrap の子孫要素に1つもaはありません。 コードを書きもらしていました。指摘していただいた、HTMLを修正しました。 修正した状態から、選択中のタブをわかりやすく表示させようとして、苦戦しています。 >もしjQuery以外にも読み込んでいるライブラリなどあるなら、そのライブラリ名 も質問内容に記載してください。 jQuery以外にも読み込んでいるライブラリは、ありません。 なにか読み込むべきなのでしょうか?
guest

0

ベストアンサー

だいぶ時間が空いてしまいましたが、
jQueryについて理解が深まった今だから、理解できました。

kanimaruさんから質問された内容が、そのまま答えでした。

$(this).tab('show') この tabって関数定義jQueryには定義無いと思いますが、何かjQueryの拡張ライブラリを読み込んでいらっしゃるのでしょうか。そのまま使うと、tabの関数定義が無くエラーとなると思います。

JSを下記のように修正すれば、解決しました。

js

1 $('.navi_wrap a').on('click', function() { 2 $('.navi_wrap a').removeClass("active"); 3    $(this).addClass("active") 4 });

投稿2018/11/05 15:32

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問