• 基于html、css、javascript的选项卡网页设计

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta
    7.         name="viewport"
    8.         content="width=device-width, initial-scale=1.0"
    9.     >
    10.     <meta
    11.         http-equiv="X-UA-Compatible"
    12.         content="ie=edge"
    13.     >
    14.     <title>基于html、css、javascript的选项卡title>
    15.  
    16.     <style>
    17.         * {
    18.             margin: 0;
    19.             padding: 0;
    20.         }
    21.  
    22.         body {
    23.             background-color: aquamarine;
    24.         }
    25.  
    26.         ul,
    27.         ol,
    28.         li {
    29.             list-style: none;
    30.         }
    31.  
    32.         .tab {
    33.             width: 600px;
    34.             height: 400px;
    35.             border: 10px solid yellow;
    36.             margin: 50px auto;
    37.             display: flex;
    38.             flex-direction: column;
    39.         }
    40.  
    41.         ul {
    42.             height: 60px;
    43.             display: flex;
    44.         }
    45.  
    46.         ul>li {
    47.             flex: 1;
    48.             display: flex;
    49.             justify-content: center;
    50.             align-items: center;
    51.             font-size: 40px;
    52.             color: #fff;
    53.             background-color: cyan;
    54.             cursor: pointer;
    55.         }
    56.  
    57.         ul>li.active {
    58.             background-color: orange;
    59.         }
    60.  
    61.         ol {
    62.             flex: 1;
    63.             position: relative;
    64.         }
    65.  
    66.         ol>li {
    67.             position: absolute;
    68.             left: 0;
    69.             top: 0;
    70.             width: 100%;
    71.             height: 100%;
    72.             font-size: 100px;
    73.             color: #fff;
    74.             background-color: cornsilk;
    75.             display: none;
    76.             justify-content: center;
    77.             align-items: center;
    78.         }
    79.  
    80.         ol>li.active {
    81.             display: flex;
    82.         }
    83.     style>
    84. head>
    85.  
    86. <body>
    87.  
    88.     <div class="tab">
    89.         <ul>
    90.             <li class="active">1li>
    91.             <li>2li>
    92.             <li>3li>
    93.         ul>
    94.         <ol>
    95.             <li class="active">1li>
    96.             <li>2li>
    97.             <li>3li>
    98.         ol>
    99.     div>
    100.  
    101.  
    102.     <script>
    103.         function Tabs(ele) {
    104.  
    105.             this.ele = document.querySelector(ele)
    106.  
    107.             this.btns = this.ele.querySelectorAll('ul > li')
    108.  
    109.             this.tabs = this.ele.querySelectorAll('ol > li')
    110.         }
    111.  
    112.         Tabs.prototype.change = function () {
    113.  
    114.             var _this = this
    115.  
    116.             for (var i = 0; i < this.btns.length; i++) {
    117.  
    118.                 this.btns[i].setAttribute('index', i)
    119.  
    120.                 this.btns[i].addEventListener('click', function () {
    121.  
    122.                     for (var j = 0; j < _this.btns.length; j++) {
    123.                         _this.btns[j].className = ''
    124.                         _this.tabs[j].className = ''
    125.                     }
    126.  
    127.  
    128.                     this.className = 'active'
    129.  
    130.                     var index = this.getAttribute('index') - 0
    131.                     _this.tabs[index].className = 'active'
    132.                 })
    133.             }
    134.         }
    135.  
    136.  
    137.         var t = new Tabs('.tab')
    138.  
    139.         t.change()
    140.     script>
    141. body>
    142.  
    143. html>

     

  • 相关阅读:
    关于笔试编程题被坑的输入问题，acm模式下的python输入究竟如何写？
    golang 2018，go 1.19安装Gin
    vscode c/c++ 检测到 #include 错误。请更新 includePath。
    猿创征文 第二季｜ #「笔耕不辍」--生命不息，写作不止#
    LINUX|ubuntu常用指令
    算法通关村——字符串反转问题解析
    kafka启动报错
    基于Springcloud搭建电商平台实现高性能高并发微服务
    MySQL性能优化
    Kubernetes(K8S) kubesphere 介绍
  • 原文地址：https://blog.csdn.net/Protinx/article/details/126793713