１ページ内に 複数のタブボックスを設置

wordpressを利用し、
http://black-flag.net/jquery/20130918-4799.html
こちらのjqueryをタブの様につかっております。参考： http://cafe-elk.com/

これをカテゴリ一覧で 添付画像のように使いたいのですが、
設置したところ最初の１個しか動作しませんでした。
コードは以下の様に書いています。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

ここにタブのようなjquery UIのhtmlタグ挿入

<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>


似たような動きであれば別のjqueryでもいいのですか？
どのようにすれば思った通りになるでしょうか？
よろしくお願いします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/09/06 18:25

１ページ内にタブボックスをたくさん設置 - JavaScript - 教えて！goo(

http://oshiete.goo.ne.jp/qa/8743314.html )
との関連だと思いますが、できません。
・HTML内に同じIDは複数置けません。
　class名にしても、異なる動作をさせることはできません。
　　一番目のボックスと二番目のボックスは異なる動作になります。表示位置などが違う

　そのjavascriptで動作させるページ。画面を上にスクロールさせてから、リンクを押したら元の位置に戻るでしょ!!!。なぜならリンク先のターゲットの位置がウィンドウ左上を原点にしているからです。

　ですから、二つの理由で、複数のタブボックスを一つのページには不可能なのです。
★HTMLが文書構造だけを明瞭にマークアップされていれば、スタイルシートで行なうほうが簡単でしょう。それでもタブボックスとして機能するボックスは一箇所だけです。
　羅列されている異なるsectionについて、ひとつのビュー枠に表示させることになるでしょう。
　わからやすいようにHTML5風に書くと
<section>
　<section>
　　<section>
　　</section>
　　<nav></nav>
　</section>
　<section>
　　<section>
　　</section>
　　<nav></nav>
　</section>
　<section>
　　<section>
　　</section>
　　<nav></nav>
　</section>
を、
<section>
┌<section> ┐
│　 <nav>　│次のsub sectionへのリンクも含む
├─────┤
│<section> │
└─────┘
　　以下のsub sub sectionは見せない。