-2

我正在开发一个水平结构并具有地铁外观的网站。所以当用户滚动时，内容会水平移动。如果您不明白我的意思，您可以使用 Windows 8 开始菜单上的 Metro 应用程序作为示例。现在我需要这个 jquery 的帮助，我需要在其父 div 的开头（不是顶部而是最左边）的 div 中添加一个类名“current”。我知道我的描述有点含糊，但任何帮助将不胜感激。

好的，这里是 html 和 jquery：

<div id="container">
        <div id="header">
            <div id="arrows">
                <div id="left">
                    <a class="slider" href=".previous">
                        <img src="LeftArrow.png" />
                    </a>
                </div>
                <div id="right">
                    <a class="slider" href=".next">
                        <img src="RightArrow.png" />
                    </a>
                </div>
            </div>
        </div>
        <div id="contentBox">
            <div class="box" style="background-color: blue;">
            </div>
            <div class="box" style="background-color: green;">
            </div>
            <div class="box" style="background-color: red;">
            </div>
            <div class="box" style="background-color: yellow;">
            </div>
            <div class="box" style="background-color: purple;">
            </div>
            <div class="box" style="background-color: orange;">
            </div>
            <div class="box" style="background-color: blueviolet;">
            </div>
        </div>
    </div>
    <div id="script">
        <script type="text/javascript">
            $('body').niceScroll();

            var deck = new $.scrolldeck({
                buttons: '.slider',
                easing: 'easeInSine'
            });

            var tempWidth = 0;
            $('#contentBox .box').first().addClass('current');
            $('#contentBox .box').first().next().addClass('next');
            $('#contentBox .box').each(function () {
                tempWidth += $(this).outerWidth(true);
            });
            $('#contentBox').css({ 'width': tempWidth });                

            $('#right').click(function () {
                $('.previous').removeClass('previous');
                $('.current').addClass('previous');
                $('.current').removeClass('current');
                $('.next').addClass('current');
                $('.current').removeClass('next');
                $('.current').next().addClass('next');

            });

            $('#left').click(function () {
                if (!$('#contentBox .box').first().hasClass('current')) {
                    $('.next').removeClass('next');
                    $('.current').addClass('next');
                    $('.next').removeClass('current');
                    $('.previous').addClass('current');
                    $('.current').removeClass('previous');
                    $('.current').prev().addClass('previous');
                }
            });                
        </script>
    </div>

div "#contentBox" 的宽度为 4000px，里面的 div 的宽度为 550px，并且是浮动的：向左。我目前已经编写了 jquery 代码来使我的箭头工作。如果您查看我的 jquery，我有点需要相同的内容，但不是单击箭头，而是应该取决于哪个 div 位于父 div“#contentBox”的开头，该 div 将是“当前”的那个它的左侧将是“上一个”，而其右侧将是“下一个”。我希望新信息能帮助你们理解我想要实现的目标。

谢谢

4

1 回答 1

0

就像是：

html:

<div class="panel" style="float:left">
panel 1 here
</div>

<div class="panel" style="float:left">
panel 2 here
</div>

jQuery：

$(document).on('scroll', function(){
    $('div.panel').removeClass('selected');
    $('div.panel:visible:first-child').addClass('selected');
});
于 2013-10-25T08:47:30.600 回答