Question

我一整天都在努力寻找符合我想要的东西，但我无法在任何地方找到任何东西。

我想创建一个show hide div，用于显示/隐藏一个固定区域中的div。

我想在我的页面的一半上画一个拇指画廊，在页面的另一半我想要显示与该拇指相关联的完整个人资料，所以当我点击另一个拇指时，前一个拇指的div消失并且新的拇指div出现在它的位置。

我希望实现这样的目标:(当你点击拇指时，文字显示在左侧） http://www.tcsdigitalworld.com/team

我已经在另一个图像互换的网站上实现了类似的东西，但我想在此添加文本并显示更多内容，例如个人资料。你可以看到我在这里做了什么： http://www.dansiop.com/epbs/index.php/brides/gowns/paloma-blanca.html

如果有人能指出我正确的方向，我会非常感激。

非常感谢

更新：谢谢大家的意见，但是当涉及到javascript时，我有点大量的n00b。

我已尝试在网站上完成所有这些工作，我希望它继续下去，我不能让它们中的任何一个工作。我可以让他们中的一些人在某个时刻工作，但不是应该的。

我最接近它的工作是使用ErnestasStankevičius提供的样本

但是你可以看到它并不是很有效，因为当我点击拇指时它们会消失 - 它不会在上面的链接上执行，但它会在我的网站上执行。我也不确定在哪里放置哪些内容才能使其正常工作。

我在哪里放置拇指src以及我在哪里放置个人资料内容，主图像等？

我称这是我的标题：

<script>    
$(document).ready(function(){
$('.thumb').click(function(){
    $('#main').fadeOut(500).html($(this).children('.bla').html()).fadeIn(200);
})
});

 </script>

我在我的CSS中设置了这个（不是我想要的最终，但它是你开始时的一个开始：

#main { color: red }
.bla { display: none }
.thumb { cursor: pointer; background-color: blue; height: 100px; width: 100px; margin:  5px }

我使用这个html：

<div id="main">sdfsdfsdf</div>
<div class="thumb">
<div class="bla">asdasdasd1</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd2</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd3</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd4</div>
</div>

只是为了澄清一下，当我点击拇指时，文字会按照我想要的方式更改，但拇指会消失（不是我想要的）

提前致谢。

丹

Answer 1

对richardneililagan的答案进行扩展......

这里有一些额外的HTML和一些JS：

<div id="leftpane">
    <img class="thumb" id="img_1" />
    <img class="thumb" id="img_2"/>
    <img class="thumb" id="img_3"/>
    <img class="thumb" id="img_4"/>
</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
        <!-- etc -->
</div>

然后你可以有这样的事情来处理你的事件：

$(".thumb").click(function() {
      var id = $(this).attr("id").split("_").pop();
      $(".profile").fadeOut();
      $("#prof_" + id).fadeIn();
}

希望有所帮助！

修改

好的，根据我之前写的代码，这是有效的（在这里测试：http://jsfiddle.net/deleteman/94jQS/）

<强> HTML

<div id="leftpane"> <a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a> <a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a> <a class="thumb" href="#"><img id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a> </div> <div id="rightpane"> <div id="prof_1" class="profile">Profile for image 1</div> <div id="prof_2" class="profile">Profile for image 2</div> <div id="prof_3" class="profile">Profile for image 3</div> </div>

<强> CSS

a.thumb img { width:100px; } .profile { display:none; }

<强> JS

$(".thumb").click(function() { var id = $(this).children("img").first().attr("id").split("_").pop(); $(".profile").fadeOut('slow'); $("#prof_" + id).fadeIn(); return false; });

现在好些吗？这对你有用吗？

Answer 2

如果您将HTML结构化为网格，那将非常容易。

<div id="leftpane">
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
</div>
<div id="rightpane">
    <!-- and the profile information goes here -->
</div>

...'因此，您可以使用jQuery选择器定位整个#rightpane。

$('#rightpane').children().hide();

Answer 3

有很多方法可以实现这一目标。

您可以在数据对象中存储要在全尺寸窗口中显示的所有信息（例如，包含对象的数组，对象包含标题，描述文本和图像的字段。）

然后生成缩略图，这样当您单击它们时，它们会调用一个函数，该函数将数组的索引作为参数。然后，您可以使用一些字符串替换方法生成新的HTML，并使用InnerHTML将其插入到完整大小的div中（在删除旧内容之后）。

Answer 4

需要一些改进，但我认为你明白了。

http://jsfiddle.net/qS5U5/

Answer 5

我没有查看你所拥有的示例网站的源代码，但是不太可能有多个隐藏和显示的div，它可能只是一个div，它是隐藏的，然后innerHTML被更改然后褪色项。

应该是

$("#theDivThatIsClicked").click(function()
{
    $("#theDivThatWillContainTheText").hide(function()
    {
    $(this).html("add some text").show()
    })
});

在一个区域中显示隐藏div

5 个答案: