zoukankan      html  css  js  c++  java
  • js制作tab选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jstab标签</title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;text-decoration: none;}
            .main{ 298px;height: 98px;border: 1px solid #000;margin: 30px auto 0;overflow: hidden;}
            .tit{ 298px;overflow: hidden;background-color: #ccc}
            .tit ul li{float: left; 20%;height: 28px;text-align: center;line-height: 28px}
            .tit ul li.select{background-color: #fff}
            .tit ul{overflow: hidden;}
            .con{overflow: hidden;}
            .con ul li{ 298px;height: 70px;overflow: hidden;display: none;}
        </style>
    </head>
    <body>
        <div class="main" id="main">
            <div id="tit" class="tit">
                <ul>
                    <li class="select">首页</li>
                    <li>开始</li>
                    <li>菜单</li>
                    <li>选项</li>
                    <li>备注</li>
                </ul>
            </div>
            <div id="con" class="con">
                <ul>
                    <li style="display: block;">内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    <li>内容4</li>
                    <li>内容5</li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            function $(id){
                return typeof id ==='string'?document.getElementById(id):id;
            };
            window.onload = function(){
                // 获取鼠标滑过或点击的标签要和切换内容的元素
                var title = $('tit').getElementsByTagName('li');
                var lis = $('con').getElementsByTagName('li');
                if (title.length!=lis.length)
                    return;
                for(var i = 0;i<title.length;i++){
                    // 遍历tit下的所有li
                    title[i].top=i;
                    title[i].onmouseover=function(){
                        for (var j = 0;j<title.length;j++) {
                            // 遍历con下的所有li
                            title[j].className=''
                            lis[j].style.display='none';
                        };
                        this.className="select";
                        lis[this.top].style.display='block';
                    }
                }
            }
        </script>
    </body>
    </html>

  • 相关阅读:
    linux安装mongodb磁盘空间不足
    ccf颁奖晚会
    Bug总结流程
    测试自学过程
    一个div,包含两个div,调整文字位置和div平均分布
    一个div,包含三个小的div,平均分布的样式
    测试成长之路
    k8s常用命令记录
    K8S 1.20.6安装dashboard(基于kubernetes-dashboard 2.0.0版本)
    F. Programming Contest
  • 原文地址:https://www.cnblogs.com/7-Eleven/p/5519218.html
Copyright © 2011-2022 走看看