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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

Q&A

解決済

2回答

2231閲覧

タブの内容を初期表示は非表示でクリックされたら表示するようにしたい

localt

総合スコア6

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

0グッド

1クリップ

投稿2019/08/08 06:13

編集2019/08/09 05:50

jQueryでUI タブの内容を初期表示は非表示でクリックされたら表示するようにしたい

最初は項目のみ表示されるようにして、選択するとタブの内容が出るようにしたいです。
内容をdisplay: none;で消しておいて

$(function() {
$('.tab').click(function(){
$('.内容').show();
});
});
で表示するようにしてみましたが消えるだけで表示されませんでした。

jquery

1 $('#A').tabs({ 2 hide: { effect: 'fadeOut', duration: 200 }, 3 show: { effect: 'fadeIn', duration: 200 } 4 }); 5 6$(function() { 7 $('.B').click(function(){ 8 $('.naiyou').show(); 9 }); 10}); 11

html

1<div id="A"> 2 <ul class="B"> 3 <li><a href="#tabs-1">項目1</a></li> 4 <li><a href="#tabs-2">項目2<br class="ul--sp">/婚約指輪</a></li> 5 </ul> 6 <div class="naiyou" style="display: none;"> 7 <section id="tabs-1">項目1の内容</section> 8 <section id="tabs-2">項目2の内容</section> 9 </div> 10</div> 11 12

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

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

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

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

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

8zca

2019/08/08 12:55

特に問題ないように思いますが、jqueryはちゃんと読み込まれているでしょうか? 読み込んでいるファイル (<script src="jsファイル"> )の部分のソースも貼っていただけますか?
localt

2019/08/09 05:10

ご質問ありがとうございます。 設定は前任者がしており、HTMLを記入しているPHPには外部ファイルを読み込むためのソースが見つかりませんでした。 tabsのフェードインフェードアウトは動いているので、jqueryは読み込まれているかと思います。
8zca

2019/08/09 10:55

元のソースを写されたのであれば、元のソース側のclass名が違っていたりクラスを示すドットが抜けていたりとかですね・・ できる範囲で元のソースを提示していただけると解決につながると思います。
guest

回答2

0

自己解決

解決しました。

のクリック先をulのclassに指定していましたが、liにclassをつけて下記のようにしたら、初回にクリックで表示、その後タブの切り替えができるようになりました。

HTML

1<div id="A"> 2 <ul class="B"> 3 <li class="C"><a href="#tabs-1">項目1</a></li> 4 <li class="C"><a href="#tabs-2">項目2</a></li> 5 </ul> 6 <div class="naiyou" style="display: none;"> 7 <section id="tabs-1">項目1の内容</section> 8 <section id="tabs-2">項目2の内容</section> 9 </div> 10</div>

js

1$(function() { 2 $('.C').click(function(){ 3 $('.naiyou').show(); 4 }); 5});

投稿2020/08/24 08:58

localt

総合スコア6

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

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

0

項目2の内容のidが間違ってるだけじゃないですか?

投稿2019/08/09 05:49

yxt003

総合スコア184

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

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

localt

2019/08/09 05:51

回答ありがとうございます。 項目のidは写し間違えです。 実際のファイルはあっていました。
yxt003

2019/08/09 06:15

問題ないように見えますね。 後は、scriptの記述がDOM記述の前(head内とか)にあると動かないくらいですかね。
localt

2019/08/09 08:30

他の方からも指摘があったのですが、 script記述は別ファイルに記述しています。 同じスクリプトファイル内にあるtabsのフェードインフェードアウトは読み込んでいるので、 これだけ読み込めない理由がわからずにいます。 もう一度見直してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問