单机切换图片

最新推荐文章于 2024-11-14 15:33:48 发布

张三OvO

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量333

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/luanqideqaq/article/details/126808636

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <link rel="stylesheet" type="text/css" href="css/common.css"/>
   <style>
       li{
           border: 1px solid black;
           width: 50px;
           height: 50px;
           display: inline-block;
           text-align: center;
           line-height: 50px;
       }

       .red{
           border: 1px solid red;
       }

   </style>
   <script src="./js/jquery-3.4.1.min.js" type="text/javascript"></script>

   <script type="text/javascript">
       $(function(){

       $("#li1").click(function(){
       $("img").attr("src","img/cake_03.jpg")
   $(this).addClass("red").siblings().removeClass("red");

       })

       $("#li2").click(function(){
       $("img").attr("src","img/cake_05.jpg")
       $(this).addClass("red").siblings().removeClass("red");

       })

       $("#li3").click(function(){
   $("img").attr("src","img/cake_07.jpg")
       $(this).addClass("red").siblings().removeClass("red");
       })

       });
   </script>
   <body>
       <ul>
           <li id="li1" class="red">li1</li>
           <li id="li2" >li2</li>
           <li id="li3" >li3</li>

       </ul>
       <div>
           <img src="img/cake_03.jpg" />
       </div>
   </body>
</html>