原生JS实现风琴页以及tbs选项卡

阳离子攻城炮

于 2023-03-28 22:43:19 发布

阅读量140

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/weixin_63297813/article/details/129827007

版权

本文介绍了如何利用JavaScript、CSS和HTML实现原生的风琴页效果，以及针对TBS（淘宝样式系统）的选项卡功能。通过这段内容，读者将学习到如何编写代码来动态控制页面元素的展示与隐藏，实现交互式的用户界面。

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

排他风琴页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        background-color: rgb(45, 44, 65);
        list-style: none;
      }
      #menu {
        color: rgb(45, 44, 65);
        margin: 10px 35%;
      }
      #menu > li > ul > li {
        height: 100%;
        width: 500px;
        color: white;
        background-color: rgb(68, 68, 90);
      }
      #menu > li > ul > li:hover {
        background-color: rgb(69, 69, 92);
        color: red;
        transition: all 0.5s linear;
      }
      #menu > li {
        width: 500px;
        height: 80px;
        line-height: 80px;
        background-color: white;
        overflow: hidden;
        text-align: center;
        border: 1px solid black;
        box-sizing: border-box;
        border-radius: 10px;
        transition: all 0.5s linear;
      }
      #menu > li:hover {
        color: red;
      }
    </style>
  </head>

  <body>
    <div>
      <ul id="menu">
        <li>
          <span class="fa fa-edit"></span>
          Diseno web

最低0.47元/天解锁文章