用jQuery改变img的src的路径重新赋值

最新推荐文章于 2024-08-27 04:40:06 发布

忙着写BUG

最新推荐文章于 2024-08-27 04:40:06 发布

阅读量1.1w

点赞数

本文链接：https://blog.csdn.net/MincingMachine/article/details/78722218

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-1.11.0.min.js.js" charset="UTF-8"></script>
       <style>
           #img1{
               width: 300px;
               height: 300px;
               border:solid black 1px;
           }
           .img2{
               width: 50px;
               height: 50px;
               border:solid black 1px;
           }
       </style>
   </head>
   <body>
       <img id="img1"/><br />
       <img class="img2" id="img2" src="img/aa.jpg"/><img class="img2" id="img3" src="img/bb.jpg" /><img id="img4" class="img2" src="img/cc.jpg" />
   </body>
   <script type="text/javascript">
       $("#img2").click(function(){
           var aa = $("#img2")[0].src;
            $("#img1").attr('src',aa);
            $("#img2").css({"border-color":"red"});
            $("#img3").css({"border-color":"black"});
            $("#img4").css({"border-color":"black"});
       })
       $("#img3").click(function(){
           var aa = $("#img3")[0].src;
            $("#img1").attr('src',aa);
            $("#img3").css({"border-color":"red"});
            $("#img2").css({"border-color":"black"});
            $("#img4").css({"border-color":"black"});
       })
       $("#img4").click(function(){
           var aa = $("#img4")[0].src;
            $("#img1").attr('src',aa);
            $("#img4").css({"border-color":"red"});
            $("#img2").css({"border-color":"black"});
            $("#img3").css({"border-color":"black"});
       })
   </script>
</html>