zoukankan      html  css  js  c++  java
  • js实现两个翻页联动的效果

         要求:(上下两个翻页效果联动,如下图示)

         

           简易css样式:   

    <style>
    div,p,a{ margin:0; padding:0 }
    .mt20{ margin-top:20px }
    .box{ 960px; margin:20px auto }
    .box a{ 20px; height:20px; margin:0 5px; background:#f2f2f2; border:1px solid #d2d2d2; font:normal 12px/20px Arial; 
    text-align:center; color:#333; display:inline-block; text-decoration:none; } .box a:hover{ color:#333; text-decoration:none; } .box a.on{ background:#05b; border:1px solid #06F; color:#fff; font-weight:bold; } </style>

           html代码:

    <div class="box">
    <p class="mt20"><a href="#" id="a1" onclick="changePage(1)" >1</a><a href="#" id="a2" onclick="changePage(2)">2</a><a href="#" id="a3" onclick="changePage(3)">3</a><a href="#" id="a4" onclick="changePage(4)">4</a><a href="#" id="a5" onclick="changePage(5)">5</a></p>
    <p class="mt20"><a href="#" id="b1" onclick="changePage(1)" >1</a><a href="#" id="b2" onclick="changePage(2)">2</a><a href="#" id="b3" onclick="changePage(3)">3</a><a href="#" id="b4" onclick="changePage(4)">4</a><a href="#" id="b5" onclick="changePage(5)">5</a></p>
    </div>

           js:

    <script type="text/javascript">
        var ID = ' ';
        function changePage(id){
            var o = document.getElementById("a"+ID);
            var O = document.getElementById("b"+ID);
            var obj = document.getElementById("a"+id);
            var Obj = document.getElementById("b"+id);
            if(o)
            {
                o.className = ' '; 
                O.className = ' '; 
              }
              obj.className = 'on';
              Obj.className = 'on';
              ID = id;
            }
    </script>

          

  • 相关阅读:
    php max()函数 语法
    php min()函数 语法
    php mt_rand()函数 语法
    php rand()函数 语法
    php pi()函数 语法
    php trim()函数 语法
    php chop()函数 语法
    php rtrim()函数 语法
    php ltrim()函数 语法
    php is_file()函数 语法
  • 原文地址:https://www.cnblogs.com/honeyHHX/p/3821764.html
Copyright © 2011-2022 走看看