0

Web サイトのチーム ページを作成しようとしています。各メンバーの写真は、「グリッド」タイプのビューにレイアウトされています。このグリッドの下には、いくつかのコンテンツを含む 2 つのボックスがあります。ボックス 1: テキストを含む基本的な div。ボックス 2: いくつかのサンプル % または値ベースのバーを含む Div。

Web サイトの訪問者がチーム メンバーの写真をクリックすると、そのメンバーに関する情報がボックスに入力されます。ボックス 1: 人物に関する説明とリンク。ボックス 2: バーのデータは、メンバーが持っているスキルを表す値に変わります。

これは、pagify.js 以外の方法で実行できますか?

EDIT*** (2013 年 8 月 16 日) 私の質問の最初の部分は解決済みです。2 番目のボックスでは、ここにあるようなアニメーションのスキルバーを作成したいと思いました 。

EDIT*** (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 に答える