WEB开发网
开发学院网页设计JavaScript jquery实现前一个和后一个效果 阅读

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

 2010-09-14 13:08:54 来源:WEB开发网   
核心提示:[示例代码] <html><head><script src="jquery-1.2.js"></script><script>$(document).ready (function () {$("#previous")

[示例代码]

<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>

Tags:jquery 实现 一个

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接