0

重複の可能性:
タブの JavaScript/CSS に似た複数のトグル

javascriptまたはjqueryで作成されたタブを探していますが、HTMLドキュメント、コード自体に直接実装するのが簡単です。CSS は実際には必要ありません。コンテンツに CSS を実装する方法についてのマークアップが必要なだけです。

これが状況です。「タブ」自体として機能するサムネイルのような画像がありますが、それらの上にコンテンツがあるため、このように見えます...

     Dynamic Content Here

thumbnail1  thumbnail2  thumbnail3

もちろん、クリックされたサムネイルに応じて動的コンテンツが変化します。一度に 1 つのサムネイルのコンテンツのみをアクティブにしたい。つまり、1 つのコンテンツがアクティブな間、他のすべてのコンテンツを非表示にする必要があります。

さらに、このようなループでこれらを生成しています

while some condition in php

contentGenerated

生成されたコンテンツに関連付けられたサムネイル

このループは、いくつかのサムネイルを実行し、コンテンツをその特定のサムネイルに関連付けます。これが、サムネイルがクリックされたときに表示されるコンテンツを決定する方法です。

最初のサムネイルとそのコンテンツは、通常のタブのように自動的にアクティブになり、表示されます。唯一の違いは、タブ (私の場合はサムネイル) が下部にあり、コンテンツが上部にあることです。

他のソリューションで私が抱えていたもう 1 つの問題は、マークアップをループに実装することです。これと同じくらい単純なマークアップは、実装が非常に簡単です...

<div class="tabs">
while some condition in php 

<div class="content" id="<?php adynamicIDgenerated ?>">

contentGenerated

</div>

<div class="tab" id="<?php thesameexactID so it can be matched; ?>">

生成されたコンテンツに関連付けられたサムネイル

</div>

</div>

もちろん、ループ内の div ステートメントはすべてのタブに対して生成されます。彼らは自分のIDを持っています。基本的に、サムネイルで生成されたコンテンツは、同じ ID を持つものと簡単に一致する可能性があります。それを使ってトグルを作成することができました。これらの仕様でタブを作成するのに問題があります。

4

1 に答える 1

0

EDIT UPDATE 次のようにループと Php でこれを使用できます

for($i=1 ; $i < num; $i++)
{
  echo("<div id='".$i."'><img src='img-source.jpg' height='50px' widht='50px' id='thumbnail' ></div><br>");
}

<div id="thumb"><img src='Default.jpg' height='200px' widht='200px' ></div>

 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>

   $("#thumbnail").click(function() {
var imgsrc = $("img#thumbnail").attr("src");
   $("#thumb").html("<img src='"+imgsrc+"' height='200px' widht='200px' >");
     });

 </script>

このDEMOのようなものを試すことができます

HTML コード

<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>

jQuery

$("#one").click(function() {
  $("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});

$("#two").click(function() {
  $("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
 });

$("#three").click(function() {
   $("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});
于 2013-01-30T06:18:15.207 に答える