-3

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

<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 变量。我会很高兴你的回答。

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>

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

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

如果你使用字符串变量要小心，那么你必须在你的代码中写上引号（“），比如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 回答