Question

我想为我网站上的图片添加标签。图像由用户添加并在页面上列出。每个图像都有自己的标签。我找到了这个来源并应用它：

<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}

在像

之类的div之后

tab3Content_{$aPhoto.photo_id}

所以现在每个项目都有自己的div。（例如：tab3Content_16，tab3Content_17）

但我不知道如何在Java Script中应用这个照片id变量。我很乐意为您解答。

Answer 1

通常，如果要在客户端使用服务器端的变量（PHP，Java，C＃，python，...）（JavaScipt，HTML，CSS，...），则必须将变量写入页面

对于PHP和JavaScript，可以通过以下方式完成：

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

当$PHPvariable包含值10时，客户端生成的源代码为：

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

如果您使用的是String变量，请小心，然后您必须在代码中写上“＃{1}}

的符号（”）

无论如何，这不适合您。在您的示例中，您使用静态JavaScript，使用已使用的名称，代码结构和选项卡计数始终为3.如果用户可能上传任意数量的图像，并且您希望在单击相应选项卡时显示它，则必须更改JavaScript代码。最简单的方法是使用jQuery library。

然后你必须意识到你想要使用哪种HTML结构。基于代码的最小结构是：

jsVariable = "<?php= $PHPvariable ?>";

这个HTML代码可以由PHP代码生成，如：

 <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>

然后您可以根据点击<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>来编写JavaScript。使用jQuery可能是这样的：

li

如何在JavaScript中使用php变量

1 个答案: