![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
こちらのページにあるようなタブをjQueryで作り、
http://allabout.co.jp/internet/javascript/closeu …
出来上がったタブの中に、以下のページ
http://allabout.co.jp/internet/javascript/closeu …
にあるようなアコーディオンメニューを表示したいのですが、
タブの表示まではできるのですが、
アコーディオンメニューが追加できません。
実現へのヒント等、教えて頂ければ幸いです。
No.2ベストアンサー
- 回答日時:
実現へのヒントです。
JQuery UIのデモページのソースをそのまま組み合わせるだけでできました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page(Tab & Accordion )</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
});
</script>
</head>
<body>
<h1>jQuery UI Example Page(Tab & Accordion )</h1>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Page1</a></li>
<li><a href="#tabs-2">Page2</a></li>
<li><a href="#tabs-3">Page3</a></li>
</ul>
<div id="tabs-1">FirstPage
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>First-Item</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Second-Item</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Third-Item</div>
</div>
</div>
</div>
<div id="tabs-2">Second Page</div>
<div id="tabs-3">Third Page</div>
</div>
</body>
</html>
参考URL:http://jqueryui.com/demos/
返信が遅れまして申し訳ありません。
お答えの通り、demoコードを組み合わせて突破できました。
ありがとうございました。
まだまだ勉強不足ということを痛感させられました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- タブレット huion kamvas 13 液タブの方にペイントソフトを表示出来ない。 1 2022/04/24 19:00
- Access(アクセス) Access2016でフォーム内にExcelの複数シートを 表示させるイメージで複数テーブルの デー 1 2022/11/25 15:30
- Word(ワード) Wordで見出しの設定が巧く出来ません、またスタイルの一部を表示するには(office365) 1 2022/06/22 18:20
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
- SEO googole サーチコンソールのページについて 1 2022/08/09 00:04
- Excel(エクセル) セルの値をグーグルで検索するエクセルVBAについて! 2 2022/08/01 21:41
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- Word(ワード) Word2013で、複数の表を同時に解除したい 1 2023/01/24 11:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
ネストされたチェックボックス...
-
jQueryの要素選択について
-
クリックした<a>タグのみにClas...
-
【jQuery】hoverしたn秒後にイ...
-
jQueryの重複クリック回避につ...
-
大量のチェックボックス状態取...
-
オブジェクトがありませんのエラー
-
jQuery タブメニューへのダイ...
-
javascriptで正規表現の検索が...
-
JavaScriptで、?マークとコロ...
-
フォームのテキストエリアに検...
-
JS <a></a>タグ内のリンク先ア...
-
自閉式ツリーの修正について
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
createElementで作成した要素を...
-
eclipseでcssを使うためには?
-
交互に入れ替わる画像を複数配置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
Jquery タブで、4つのliのうち...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
JavaScript インクリメントの書...
-
タブ切り替えの初期表示について
-
jqueryプルダウンメニュー個別着色
-
複数の画像をランダム(シャッ...
おすすめ情報