实用的选项卡的实现方式

最新推荐文章于 2024-09-11 14:09:02 发布

苍岚王

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量111

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/q2432315767/article/details/126485007

版权

这段代码展示了如何使用HTML、CSS和JavaScript实现一个交互式的网页布局，包含顶部的选项和底部的盒子。当用户点击顶部选项时，相应底部的盒子会高亮显示，其他元素恢复默认状态。通过事件监听和类名操作实现了选中效果。

摘要由CSDN通过智能技术生成

上图

上代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div class="w">
       <div class="top">
           <div class="ssk">选项1</div>
           <div >选项2</div>
           <div >选项3</div>
           <div >选项4</div>
       </div>
       <div class="fot">
           <div class="ccg">盒子1</div>
           <div>盒子2</div>
           <div>盒子3</div>
           <div>盒子4</div>
       </div></div>


       <script>
           var btn=document.getElementsByClassName("top")[0].getElementsByTagName("div")

           var box=document.getElementsByClassName("fot")[0].getElementsByTagName("div")

           for(var i=0;i<btn.length;i++){
                   btn[i].index=i
                   btn[i].οnclick=function(){
                       for(var y=0;y<btn.length;y++){
                                               btn[y].className=""
                                               box[y].className=""
                       }


                       this.className="ssk"
                       box[this.index].className="ccg"

                   }
           }

       </script>



       <style>
           .w .fot div{
               height: 499px;
               width: 800px;
               text-align: center;
               line-height: 499px;
               background-color: black;
               color: aqua;
               font-size: 50px;
               display: none;
           }

               .w .fot .ccg{
                   display: block;
               }

           .w{
               width: 800px;
               height: 800px;
               border:1px solid red ;
               margin: 100px auto;
           }
           .w .top {
               display: flex;
               border-bottom: 1px solid green;
           }
           .w .top .ssk{
               background-color: red;
           }

           .w .top div{
               width: 200px;
               height: 300px;
               text-align: center;
               font-weight: 900;
               background-color: black;
               color: white;
               font-size: 30px;
               line-height: 300px;
           }

           .w .top div:hover{
           background-color: red;
           cursor: pointer;

           }
       </style>




   </body>
</html>