Question

我需要知道，如何重现您在此页面上看到的相同效果： http://www.google.it/#q=meteo

有一个很好的“小部件”meteo，我正在尝试在我的网站上重新创建。当您单击第二天之一（窗口小部件的底部空间）时，中间内容会发生变化。我怎么能这样做呢？

P.s：抱歉我的英语不好。

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>

Jquery在点击时更改内容

1 个答案: