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 - 综合实例 - 实现前一个和后一个效果

jQuery - 综合实例 - 实现前一个和后一个效果 [示例代码]                                 $(document)....
  • hu_zhenghui
  • hu_zhenghui
  • 2007年10月23日 12:22
  • 672

matlab之向量中后一元素减前一元素

一维向量中后一元素减前一元素,有两种实现方法。 首先假设 len=length(X); 方法一,平移向量,再相减temp=X(2:end); temp(len)=0; %补0 ans=temp-...
  • yq_forever
  • yq_forever
  • 2017年06月19日 21:46
  • 509

使用jQuery生成div元素闪烁效果

使用jQuery生成div元素闪烁效果
  • u014769320
  • u014769320
  • 2015年07月14日 13:12
  • 1058

C语言练习(2)

  • ysw1234
  • ysw1234
  • 2010年02月03日 17:08
  • 858

jQuery实现折叠效果

近来工作一直很忙,加之学业上也有好多事情需要处理,一直没腾出时间来发博,自己都觉得不太好意思了!!废话就不多说了,我们直接进入正题。Div折叠,是我在实际工作中实现的一种效果。我想同行的朋友们也有可能...
  • chris_mao
  • chris_mao
  • 2009年06月02日 15:45
  • 6580

把命令行参数中的前一个文件名标识的文件, 复制到后一个文件名标识的文件中, 如命令行中只有一个文件名则把该文件写到标准输出文件(显示器)中

#includemain(int argc,char *argv[]){FILE *fp1,*fp2;char ch;if(argc==1){printf("have not enter file n...
  • wahaajava
  • wahaajava
  • 2008年05月30日 09:41
  • 957

JS取得当前节点的前一个和后一个节点

JS删除上一个节点 function test(o){while(o=o.previousSibling,o.nodeType!=1);o.parentNode.removeChild(o);}d删除...
  • java_pengjin
  • java_pengjin
  • 2010年11月04日 17:54
  • 19861

jquery实现时钟

时钟的实现主要是利用定时器每一秒获取一下时间,小于10自动补零,关键代码如下 $(function () {             setInterval(function(){       ...
  • sunflower_li
  • sunflower_li
  • 2017年03月16日 15:15
  • 1305

mysql查询表中前一条和后一条数据

标题1.查询前一条记录: select * from 表名 where id = (select id from 表名 where ranking < #{ranking,jdbcTyp...
  • qq_34912469
  • qq_34912469
  • 2017年06月13日 18:19
  • 288

使用jQuery实现简单的分页效果

使用jQuery实现简单的分页效果 原理剖析:使用AJAX读取HTML模板文件返回模板内容...
  • FKDXHS
  • FKDXHS
  • 2017年12月19日 10:35
  • 177
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: jquery实现前一个和后一个效果
举报原因:
原因补充:

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