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

649人阅读 评论(0) 收藏 举报

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





 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2844119次
    • 积分:41198
    • 等级:
    • 排名:第88名
    • 原创:1007篇
    • 转载:947篇
    • 译文:79篇
    • 评论:406条
    最新评论