javascript - Jqueryはクリック時にコンテンツを変更します

Question

このページで見られるのと同じ効果を再現する方法を知る必要があります: http://www.google.it/#q=meteo

私のウェブサイトで再作成しようとしている素敵な「ウィジェット」メテオがあります。次の日 (ウィジェットの下部スペース) のいずれかをクリックすると、中央のコンテンツが変更されます。どうすれば同じことができますか？

Ps: 下手な英語でごめんなさい。

Answer 1

動的データをロードする必要がない場合は、このウィジェットを単純なスライダーとして見ることができます。これが私があなたのために作った例です：

$('#widget .nav li').click(function(e) {
    $('#widget .nav li').removeClass('active');
    $(this).addClass('active');
    $('#widget .content').animate({
        left: $('#widget .nav li').index(this) * -265
    }, 300);
});

#widget {
    position: relative;
    width: 265px; height: 200px;
    overflow: hidden;
    border: 1px solid #bcbcbc;
}
#widget ul {
    list-style: none;
    margin: 0; padding: 0;
}
#widget .nav {
    position: absolute; bottom: 0; left: 0;
}
#widget .nav li {
    display: block;
    float: left; margin: 5px 0 5px 5px;
    width: 30px; height: 30px;
    text-align: center; line-height: 30px;
    cursor: pointer;
    border: 1px solid #dedede;
}
#widget .nav li:hover,
#widget .nav li.active {
    background: #efefef;
    border-color: #bcbcbc;
}
#widget .content {
    position: absolute; top: 0; left: 0;
    display: block;
    width: 1855px; height: 150px; /* 1820 = 265*7 */
}
#widget .content li {
    display: block;
    float: left; padding: 5px;
    width: 255px; height: 150px;
    text-align: center; line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="widget">
    <ul class="content">
        <li>Content Monday</li>
        <li>Content Tuesday</li>
        <li>Content Wednesday</li>
        <li>Content Thursday</li>
        <li>Content Friday</li>
        <li>Content Saturday</li>
        <li>Content Sunday</li>
    </ul>
    <ul class="nav">
        <li class="active">Mo</li>
        <li>Tu</li>
        <li>We</li>
        <li>Th</li>
        <li>Fr</li>
        <li>Sa</li>
        <li>Su</li>
    </ul>
</div>