请老师检查一下，有没有需要优化的地方

来源：3-5 编程练习

慕斯6325516

2020-01-06 10:17:10

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #container{
    overflow: hidden;
    width: 240px;
    height: 185px;
    margin: 0 auto;
   }
   a{
    text-decoration: none;
    color: white;
    width: 25%;

   }
   a:hover{
    background-color: #FFF;
    color: #000;
   }
   nav{
    background-color: black;
   }
   img{
   position: absolute;
   top: 29px;
   }
  </style>
</head>
<body>
  <div id="container">
   <nav>
    <a href="#">pwa</a>
    <a href="#">node</a>
    <a href="#">vue</a>
    <a href="#">小程序</a>
   </nav>
   <div>
    <img src="../../img/images/image1.jpg" alt="" />
    <img src="../../img/images/image2.jpg" alt="" />
    <img src="../../img/images/image3.jpg" alt="" />
    <img src="../../img/images/image4.jpg" alt="" />
   </div>
  </div>
  <script src=" ../../js/jquery-3.4.1.min.js"></script>
  <script type="application/javascript">
   $(document).ready(function(){
    $('a').click(function(){
     $('img').eq($(this).index()).css('opacity','1').siblings().css('opacity','0');
     $(this).css({'background-color':'#FFF','color':'#000'}).siblings().css({'background-color':'#000000','color':'#fff'});
    });

   });
  </script>
</body>
</html>