Question

可能重复：
Multiple Toggles Almost like Tabs JavaScript/ CSS

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

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

     Dynamic Content Here

thumbnail1  thumbnail2  thumbnail3

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

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

while some condition in php

contentGenerated

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

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

第一个缩略图及其内容应自动显示并显示，就像普通标签一样。我看到的唯一区别是标签（在我的情况下是缩略图）位于底部，内容位于顶部。

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

<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的内容匹配。我能够用它创建一个切换。我在使用这些规范创建标签时遇到问题。

Answer 1

编辑更新您可以将其与循环和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' >");
});

在Javascript或jQuery中制作标签

1 个答案: