胡争辉

胡争辉

jquery实现前一个和后一个效果

jquery实现前一个和后一个效果

[示例代码]

<html>
    <head>
        <script src="jquery-1.2.js"></script>
        <script>
            $(document).ready (
                function () {
                    $("#previous").click (
                        function () {
                            var current;
                            $("#items .item").each(
                                function (index, element) {
                                    if ("red" === $(element).css("color")) {
                                        current = index;
                                    }
                                }
                            );
                            $("#items .item").each(
                                function (index, element) {
                                    if (index === current - 1) {
                                        $($("#items .item")[current]).css("color", "");
                                        $(element).css("color", "red");
                                    }
                                }
                            );
                        }
                    );
                }
            );
            $(document).ready (
                function () {
                    $("#next").click (
                        function () {
                            var current;
                            $("#items .item").each(
                                function (index, element) {
                                    if ("red" === $(element).css("color")) {
                                        current = index;
                                    }
                                }
                            );
                            $("#items .item").each(
                                function (index, element) {
                                    if (index === current + 1) {
                                        $($("#items .item")[current]).css("color", "");
                                        $(element).css("color", "red");
                                    }
                                }
                            );
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <div id="items">
            <div class="item" style="color: red;">
                1
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
            <div class="item">
                4
            </div>
            <div class="item">
                5
            </div>
            <div class="item">
                6
            </div>
            <div class="item">
                7
            </div>
            <div class="item">
                8
            </div>
            <div class="item">
                9
            </div>
            <div class="item">
                10
            </div>
        </div>
        <button id="previous">
            previous
        </button>
        <button id="next">
            next
        </button>
    </body>
</html>

[jQuery官方网站]

http://jquery.com/

[jQuery下载地址]

http://docs.jquery.com/Downloading_jQuery

[jQuery当前版本]

http://docs.jquery.com/Release:jQuery_1.2

[jQuery相关论坛]

http://groups.google.com/group/jquery-en

[jQuery关键词]

jQuery

[jQuery常用函数]

filter, 用于在集合中过滤元素
hover, 用于设置元素响应mouseover和mouseleave

[jQuery插件]

Easing,http://jquery.com/plugins/project/easing





 
阅读更多
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。 https://blog.csdn.net/hu_zhenghui/article/details/1787573
想对作者说点什么? 我来说一句

jquery实现一个treeview效果

2009年09月10日 190KB 下载

JQuery实现一个电子相册效果

2012年10月20日 525KB 下载

一个很不错的图片轮换jquery

2010年07月09日 291KB 下载

仿Google的一个鼠标拖动效果

2009年10月11日 10KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭