-3

Web サイトの画像にタブを追加したいと考えています。画像はユーザーによって追加され、ページに一覧表示されます。すべての画像には、その下に独自のタブがあります。このソースを見つけて適用しました：

<style>
  .tabContainer{margin:10px 0;width:400px;}
.tabContainer .digiTabs{list-style:none;display:block;overflow:hidden;margin:0;padding:0px;position:relative;top:1px;}
 .tabContainer .digiTabs li{float:left;background-color:#46AAF7;border:1px solid #e1e1e1;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff;}
.tabContainer .digiTabs .selected{background-color:#fff;color:#393939;}#tabContent{padding:10px;background-color:#fff;overflow:hidden;float:left;margin-bottom:10px;border:1px solid #e1e1e1;width:93%;}
</style>
<script type="text/javascript">
 function tabs(x)
 {
  var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL

  for(i=0;i<lis.length;i++)
  {
  lis[i].className=""; //removes the classname from all the LI
}
x.className="selected"; //the clicked tab gets the classname selected
var res=document.getElementById("tabContent");  //the resource for the main tabContent
var tab=x.id;
switch(tab) //this switch case replaces the tabContent
{
  case "tab1":
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

  case "tab2":
    res.innerHTML=document.getElementById("tab2Content").innerHTML;
    break;
  case "tab3":
    res.innerHTML=document.getElementById("tab3Content").innerHTML;
    break;
  default:
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

}
 }

</script>
     <div class="tabContainer" >
      <ul class="digiTabs" id="sidebarTabs">
         <li  id="tab1" class="selected"  onclick="tabs(this);">Tab 1</li>
         <li id="tab2" onclick="tabs(this);">Tab 2</li>
         <li id="tab3"  onclick="tabs(this);">Tab 3</li>
      </ul>
       <div id="tabContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>

       <div id="tab1Content" style="display:none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
       <div id="tab2Content" style="display:none;"><img src="http://www.digimantra.com/digimantra_ad_125_125.png" alt="digimantra logo" /></div>

      <div id="tab3Content" style="display:none;">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>

ただし、この場合、どのタブをクリックしても最初の画像のタブしか開かれません。divの変数を定義するソリューションを試してみたい。だから私は追加しました：

{$aPhoto.photo_id}

のように分割した後

tab3Content_{$aPhoto.photo_id}

したがって、すべてのアイテムには独自の div があります。(例: tab3Content_16、tab3Content_17)

しかし、Java Script でこの写真 ID 変数を適用する方法がわかりません。私はあなたの答えをうれしく思います。

4

1 に答える 1

0

一般に、クライアント側 (JavaScipt、HTML、CSS など) でサーバー側 (PHP、Java、C#、python など) の変数を使用する場合は、変数をページに書き込む必要があります。

PHP と JavaScript の場合、次のように実行できます。

<script type="text/javascript">
  // Create global variable named jsVariable
  var jsVariable = <?php echo $PHPvariable; ?>;
</script>

値が 10 の場合$PHPvariable、クライアント側で生成されるソース コードは次のとおりです。

<script type="text/javascript">
  // Create global variable named jsVariable
  var jsVariable = 10;
</script>

String 変数を使用している場合は注意してください。次のようにコードに引用符 (") を記述する必要があります。jsVariable = "<?php= $PHPvariable ?>";

とにかく、これはあなたには当てはまりません。あなたの例では、使用されている名前、コード構造、およびタブ数でカウントされる静的 JavaScript が常に 3 つあります。ユーザーが任意の数の画像をアップロードする可能性があり、適切なタブをクリックしたときにそれを表示したい場合は、JavaScript コードを変更する必要があります。最も簡単な方法は、 jQuery ライブラリを使用することです。

次に、どの HTML 構造を使用するかを理解する必要があります。コードに基づく最小限の構造は次のとおりです。

 <div class="tabContainer" >
   <ul class="digiTabs" id="sidebarTabs">
     <li  id="tab1" class="selected"  onclick="tabs(this);">Tab 1</li>
     <li id="tab2" onclick="tabs(this);">Tab 2</li>
     <li id="tab3"  onclick="tabs(this);">Tab 3</li>
   </ul>
   <div id="tabContent">Lorem Ipsum ...</div>
</div>

<div class="tabHolder" style="display:none;">
  <div id="tab1Content">Lorem Ipsum ...</div>
  <div id="tab2Content"><img src="..."/></div>
  <div id="tab3Content">The standard ...</div>
</div>

この HTML コードは、次のような PHP コードで生成できます。

 <div class="tabContainer" >
   <ul class="digiTabs" id="sidebarTabs">
     <?php echo '<li id="tab'.$aPhoto.photo_id.'">'.$aPhoto.photo_name.'</li>'; ?>
   </ul>
   <div id="tabContent">Lorem Ipsum ...</div>
</div>

<div class="tabHolder" style="display:none;">
  <?php echo '<div id="tab'.$aPhoto.photo_id.'Content"><img src="'.$aPhoto.photo_src.'"/></div>'; ?>
</div>

liそして、どちらがクリックされたかに基づいて JavaScript を記述できます。jQuery を使用すると、次のようになります。

// Invoke script when document is ready
$(document).ready(function() {
  // Add click handler to ul.tabContainer > li
  $('ul.tabContainer > li').click(function() {
    // get ID of clicked element
    var id = $(this).attr('id'); // expacted values are tab1, tab2, tab3, ...
    // find hidden content in div.tabHolder
    var content = $('div.tabHolder #' + id + 'Content');
    // Copy HTML content from selected content to div#tabContent
    $('div#tabContent').html(content.html()); // method html() without parameters gets content, method html(htmlData) with one parameter sets content.
    // clear variables to prevent IE memmory leaks
    id = null;
    content = null;
  });
});
于 2013-03-09T12:22:33.207 に答える