JS图片与链接动态切换-优快云博客

本文链接：https://blog.youkuaiyun.com/qindanwei0215/article/details/53980160

做语言切换的时候遇到js图片切换问题,
就有有三组图片,每组图片里面里面有两张图片a1,a2 b1,b2 ,c1,c2, 默认显示a2,b1,c1,当点击b1的时候，b1切换成b2,a2变成a1，当点击c1的时候，c1切换成c2，b2切换成b1，当图片为 a2或者b2或者c2的时候有a链接而a1,b1,c1的时候没有a链接，



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8">

  <title> 测试 </title>

  <style type="text/css">

  .pic div{width:200px; height:100px;}

  .p11{background:url('a1.jpg');}

  .p12{background:url('a2.jpg'); cursor:pointer;}

  .p21{background:url('b1.jpg');}

  .p22{background:url('b2.jpg'); cursor:pointer;}

  .p31{background:url('c1.jpg');}

  .p32{background:url('c2.jpg'); cursor:pointer;}

  </style>

  <script type="text/javascript">

    function show(c,m,url){

      for(var i=1; i<=m; i++){

        if(i==c){

          document.getElementById('btn'+i).className='p'+i+2;

        }else{

          document.getElementById('btn'+i).className='p'+i+1;          

        }

      }

  

      window.location = url;

    }

  </script>

 </head>

   

 <body>

  <div class="pic">

  <div id="btn1" class="p12" onclick="show(1,3,'http://www.baidu.com')"></div>

  <div id="btn2" class="p21" onclick="show(2,3,'http://www.sina.com.cn')"></div>

  <div id="btn3" class="p31" onclick="show(3,3,'http://www.pconline.com.cn')"></div>

  </div>

 </body>

</html>