前端实现简易选项卡切换-优快云博客

这篇博客演示了如何使用HTML、CSS和JavaScript实现一个简单的前端选项卡切换效果。通过点击代表四季的标题（春、夏、秋、冬），相应的内容区域会显示或隐藏，为用户提供友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .head {
               width: 300px;
               height: 50px;
               border: 1px solid red;
               display: flex;
               text-align: center;
               line-height: 50px;
           }

           .head div {
               flex: 1;
           }

           .fooder {
               width: 300px;
               height: 300px;
               border: 1px solid red;
               border-top: 0;
           }
           .fooder .tile2{
               display: none;
           }
       </style>
   </head>
   <body>
       <div>
           <div class="head">
               <div class="app">春</div>
               <div class="app">夏</div>
               <div class="app">秋</div>
               <div class="app">冬</div>
           </div>
           <div class="fooder">
               <div class="content">我也算是仁至义尽</div>
               <div class="content tile2">我也不想和你道别</div>
               <div class="content tile2">你和他提起过我吗</div>
               <div class="content tile2">没能成为你的例外</div>
           </div>
       </div>
       <script type="text/javascript">
           var hear = document.getElementsByClassName('app')
           var fooder = document.getElementsByClassName('content')
           for (let i = 0; i < hear.length; i++) {
               //春夏秋冬的下标
               hear[i].key = i;
               hear[i].onclick = function() {
                   var key = hear[i].key;
                   for (var k = 0; k < fooder.length; k++) {
                       fooder[k].style.display = "none";
                       if (key === k) {
                           fooder[k].style.display = "block";
                       }
                   }
               }
           }
       </script>
   </body>
</html>