0

可能重复：
多个切换几乎就像标签 JavaScript/CSS

我正在寻找用 javascript 或 jquery 制作的选项卡，无论哪个更容易直接实现到 html 文档中，即代码本身。我真的不需要 CSS，我只需要一些关于如何将它实现到我的内容中的标记。

这是这种情况。我有类似缩略图的图像，它们本身充当“标签”，而我的内容在它们之上，所以看起来有点像这样......

     Dynamic Content Here

thumbnail1  thumbnail2  thumbnail3

当然，动态内容会根据单击的缩略图而变化。我只希望一个缩略图的内容一次处于活动状态。这意味着，所有其他内容必须在一个内容处于活动状态时隐藏。

此外，我在这样的循环中生成这些

while some condition in php

内容生成

与生成的内容相关的缩略图

此循环运行几个缩略图，并具有与该特定缩略图相关联的内容。这就是我确定单击缩略图时将显示哪些内容的方式。

第一个缩略图及其内容应自动激活并显示，就像普通选项卡一样。我看到的唯一区别是选项卡（在我的例子中是缩略图）位于底部，而内容位于顶部。

我在使用其他解决方案时遇到的另一个问题是将标记实现到循环中。像这样简单的标记对我来说非常容易实现......

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

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

内容生成

</div>

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

与生成的内容相关的缩略图

</div>

</div>

当然，循环中的 div 语句将为每个选项卡生成。他们会有自己的身份证。基本上，使用缩略图生成的内容可以很容易地与具有相同 ID 的内容相匹配。我能够用它创建一个切换。我在创建具有这些规范的选项卡时遇到问题。

4

1 回答 1

0

编辑更新您可以将其与 Loops 和 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 回答