Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡-2018-04-02
Blogger Information
Blog 23
fans 0
comment 1
visits 14222
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选项卡-2018-04-02
彪小A的博客
Original
443 people have browsed it
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        h2{text-align: center;
        }
        .box{
            width: 538px;
            height: 500px;
            background-color: white;
            border: 1px solid #ccc;
            margin: 20px auto;
            color: #363636;
        }
        .box > ul{
            background-color: #f8f8f8;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .box > ul li{
            list-style-type: none;
            width: 90px;
            height: 36px;
            float: left;
            border-right: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            text-align: center;
            line-height: 33px;
        }
        .box > ul + span{
            float: right;
            width: 90px;
            height: 36px;
            text-align: center;
            margin-top: -36px;
            line-height: 36px;
        }
        .box > ul + span >a{
            color: #696969;
            text-decoration: none;
        }
        .box li.active{
            background-color: #fff;
            font-weight: bolder;
            border-bottom: none;
            border-top: 3px solid orangered;
        }
        .box div{
            display: none;

        }
        .box div ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
        }
        .box div ul li{
            font-size: 13px;
            line-height: 1.5em;
            margin: 5px 5px;
        }
        .box div ul li a{
            color: #696969;
            text-decoration: none;
        }
        .box div ul li a:hover{
            color: #000;
        }
        .box div ul li span{
            float: right;
            color: red;

        }
    </style>
</head>
<body>
    <h2>选项卡</h2>
    <div class="box">
        <ul>
            <li class="active">技术文章</li>
            <li>网站源码</li>
            <li>原生手册</li>
            <li>推荐博文</li>
        </ul>
        <span><a href="">更多下载&gt&gt</a></span>
        <!--技术文章-->
 <div style="display: block">
            <ul>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;JavaScript用递归方法实现颠倒栈的元素</a><span>2018-04-01</span></li>
            </ul>
        </div>

        <!--网站源码-->
 <div>
            <ul>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;彩色音乐扬声器娱乐网站模板</a><span>2018-04-01</span></li>
            </ul>
        </div>
        <!--原生手册-->
 <div>
            <ul>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;CentOS7 安装 Mysql 5.7密码查看与修改</a><span>2018-04-01</span></li>
            </ul>
        </div>
        <!--推荐博客-->
 <div>
            <ul>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
                <li><a href="">JS教程&nbsp;|&nbsp;各大网站必用前端js选项卡</a><span>2018-04-01</span></li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
    var box = document.getElementsByClassName("box")[0];
    var uls = box.getElementsByTagName('ul')[0];
    var tab = uls.getElementsByTagName('li');
    var list = box.getElementsByTagName('div');
    for (var i=0;i<tab.length;i++){
        tab[i].index = i;
        tab[i].onmouseover = function () {
            for(var i=0;i<tab.length;i++){
                tab[i].className = "";
                list[i].style.display = 'none';
            }
            this.className = "active";
            list[this.index].style.display = 'block';
        };
    }

</script>
</body>
</html>

控制div的显示隐藏：display:none隐藏  display:block 显示

设置一个元素的样式 className

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post