Question

我正在尝试为网站创建一个团队页面。每个成员的图片以“网格”类型的视图布局。此网格下方有两个框，其中包含一些内容。方框1：带有一些文字的基本div。方框2：Div有一些样本％或基于值的条形。

当网站访问者点击团队成员图片时，这些框将填充有关该成员的信息。方框1：关于此人的描述，也许还有一些链接。方框2：条形图中的数据将更改为代表成员技能的值。

这可以通过以下任何方式完成：pagify.js？

编辑***（2013年8月16日）我的问题的第一部分已经过了。对于第二个方框，我想制作一个类似于http://www.alessioatzeni.com/blog/css3-skill-bar-animation/的动画技能栏我该如何动态更新这些？

编辑***（2013年8月17日）我设法实现这个功能:)。感谢。

由于

Answer 1

Javascript / jQuery onClick显示和隐藏事件应该做你想做的事。

http://www.w3schools.com/jquery/jquery_hide_show.asp - 基础知识 http://www.mkyong.com/jquery/jquery-show-and-hide-example/ - 工作范例 http://www.goldensearch.net/content/tutorials/show-hidden-content-with-javascript.php - 纯javascript： - ）

如果这不是您想要的，我们（或至少我）将需要更多详细信息。

Answer 2

当然你可以使用AJAX来实现这种行为，但只要我们不是在讨论成千上万的团队成员，一个更简单但功能更强大的解决方案就是隐藏所有详细信息，并仅为活跃成员显示用户点击了。

更新 :( JsFiddle上的工作版本[http://jsfiddle.net/9kfKw/]）

HTML （示例）

<ul id="members">
    <li>Member 1</li>
    <li>Member 2</li>
</ul>

<div id="details">
    <div>
        <div class="left">
            <p>Some Info about Member 1</p>
        </div>
        <div class="right">
            <p>Some more Info Member 1..</p>
        </div>
    </div>
    <div>
        <div class="left">
            <p>Some Info about Member 2</p>
        </div>
        <div class="right">
            <p>Some more Info about Member2..</p>
        </div>
    </div>
</div>

<强>的JavaScript

$(function() {
    $('#members li').click(function() {
        var index = $(this).index();
        $('#details > div').hide().eq(index).show();
    });
});

<强>演示

在JsFiddle（http://jsfiddle.net/9kfKw/）

上查找工作版本

在图像点击上加载内容

2 个答案: