【练习】利用Javascript实现多个重叠层点击按钮进行切换

最新推荐文章于 2022-11-06 16:29:46 发布

有梦想的水手啊

最新推荐文章于 2022-11-06 16:29:46 发布

阅读量431

点赞数

本文链接：https://blog.csdn.net/qq_45806009/article/details/115912643

版权

方法

不使用框架
使用vue

不使用框架

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabbed info box</title>
  <style>
    *{
    
      margin: 0;
      padding: 0;
    }
    .info-box{
    
      margin: 0 auto;
      width: 450px;
      height: 400px;
      border: 1px solid chocolate;
      position: fixed;
      top: 0;
    }
    .info-box ul{
    
      width: 450px;
      height: 50px;
      display: flex;
    }
    .info-box ul li{
    
      flex: 1;
      list-style-type: none;
      height: 50px;
    }
    .info-box ul li a{
    
      display: inline-block;
      width: 100%;
      height: 50px;
      text-decoration: none;
      text-align: center;
      line-height: 50px;
      color: chocolate;
    }
    .info-box ul li a:hover,
    .info-box ul li a.active{
    
      background-color: chocolate;
      color: white;
    }
    .info-box ol li{
    
      list-style-position: inside;
    }
    .info-box .panels{
    
      height: 350px;
      position: relative;
    }
    .info-box article{
    
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      height: 330px;
      color: white;
      background-color: chocolate;
    }
    .info-box .active-panel{
    
      z-index: 1;
    }
    .fake-content{
    
      background-color: chocolate;
      color: white;
      padding: 10px;
      margin-left: 470px;
    }
  </style>
</head>
<body>

  <section