電子書籍の厳選無料作品が豊富！

JQuery UIで、表示したタブの中にアコーディオンを追加したい

解決済

  • 質問者：gnine09
  • 質問日時：
  • 回答数：2件

こちらのページにあるようなタブをjQueryで作り、
http://allabout.co.jp/internet/javascript/closeu …

出来上がったタブの中に、以下のページ
http://allabout.co.jp/internet/javascript/closeu …
にあるようなアコーディオンメニューを表示したいのですが、

タブの表示まではできるのですが、
アコーディオンメニューが追加できません。

実現へのヒント等、教えて頂ければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yyr446
  • 回答日時：

実現へのヒントです。


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/
    • good
    • 0
    • 件
通報する
この回答へのお礼

返信が遅れまして申し訳ありません。

お答えの通り、demoコードを組み合わせて突破できました。
ありがとうございました。

まだまだ勉強不足ということを痛感させられました。

通報する
お礼日時：2009/09/12 16:26

No.1

  • 回答者： yyr446
  • 回答日時：

どのようにコーディングしたのか教えてください。


それとも、まったく手がつけられないのですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

返答が遅れまして申し訳ありません。

Tabを生成したあとに、そのidに対してinnerHTMLをしようとしました。

2番目の回答のように、demoコードを組み合わせて
何とか突破することができました。
ありがとうございました。

通報する
お礼日時：2009/09/12 16:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報