0

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

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

除了：pageify.js 之外，这可以通过任何方式完成吗？

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

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

谢谢

4

2 回答 2

0

当然，您可以使用 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/ )上找到一个工作版本

于 2013-08-09T15:51:35.670 回答
0

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 :-)

如果这不是您要找的，我们（或至少我）将需要问题中的更多细节。

于 2013-08-09T15:48:39.690 回答