zoukankan      html  css  js  c++  java
  • 简单的选项卡制作(原生JS)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            color: white;
            display: none;
        }
    </style>
    </head>
    
    <body>
    <a href="javascript:btn(1)">视频</a>
    <a href="javascript:btn(2)">音乐</a>
    <a href="javascript:btn(3)">图片</a>
    <div>视频</div>
    <div>音乐</div>
    <div>图片</div>
    </body>
    </html>
    <script>
        var odiv = document.getElementsByTagName("div");
        function btn(index){
            for(var i = 0 ;i<odiv.length;i++){
                odiv[i].style.display = "none";
            }
            odiv[index-1].style.display = "block";
        }
    
    </script>
  • 相关阅读:
    Html中常用的属性
    vue-页面回退
    vue-watch
    html
    Html-列表
    vue项目中px自动转换为rem
    vuex使用
    localStorage的使用
    slot
    模糊查询
  • 原文地址:https://www.cnblogs.com/lsqbk/p/10259016.html
Copyright © 2011-2022 走看看