サムネイルをクリックするとコンテンツが変わる

質問

http://www.au.kddi.com/

上記、AUのページのように、
下にサムネイルがあって、クリックすると上のコンテンツが変わるようなコンテンツを作りたいと思っています。

画像を切り替えることはできたのですが、
div枠を切り替えるようにしたいと思っています。

いろいろと検索しましたが、ギャラリー用のプラグインばかりで、
div枠を切り替えるものが見つかりませんでした。

どのようにしたらいいか、
もしくは、プラグインがあればそちらを教えてください。

よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

＞画像を切り替えることはできたのですが、
どのような方法で切り替えをなさっているのか不明ですが、画像の切替をdisplay:none/blockの切り替えで行なっているのであれば（ご提示のサイトはそのような方法と思われますが）、divでも同様の方法で可能かと思われます。

ご提示のサイトの例で言えば、
id=wrapVisualの要素の中に拡大表示される画像が並んでいて、サムネイルのクリックに併せてそれぞれの表示/非表示を切替えているようです。
切り替えの対象はp要素になっていて、その中にimg要素が入っている構成になっています。
div要素の場合でも、このｐ要素をdiv要素に代えて考えれば、同じ要領でいけるはずです。

ついでに言えば、リンク要素はposition:absoluteでその上に重ねて表示しておいて、内容変更時にリンク先も書換えているようです。

お礼

お礼が遅くなり、申し訳ございません。
無事解決しました。
ありがとうございました。