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

原创 2007年09月16日 23:12:00

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





 
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

相关文章推荐

JQuery实现的一个电子相册效果

  • 2012年10月20日 21:21
  • 525KB
  • 下载

css3和jQuery实现一个简单的标签页效果

主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果,    css代码如下:        body{width: 600px;...

jQuery实现的一个tab切换效果,(内部还有切换)。

大致效果如图 下面是代码:自己导入jQuery包。 样式: body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;mar...

jquery实现的一个星级评价

  • 2014年01月10日 17:03
  • 2KB
  • 下载

用Java和Jquery实现了一个砸金蛋例子

之前在网上找到了一个Jquery+PHP实现的砸金蛋的例子,正好公司也要我写一个类似的砸金蛋的功能,于是在网上找了找参考,用Jsp程序也弄了一个出来,首先是Html的效果,我打算每次在页面上只显示一个...

jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层

无标题文档 .caption{ width:200px; height:100px; background-color:red; position:fixed; } .layer{ width:2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: jquery实现前一个和后一个效果
举报原因:
原因补充:

(最多只允许输入30个字)