选项卡

最新推荐文章于 2023-07-12 23:55:28 发布

大官人遛狗

最新推荐文章于 2023-07-12 23:55:28 发布

阅读量115

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42894309/article/details/95041464

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }
        .box{
            width:1200px;
            height:100%;
            margin:0 auto;
        }

        .header {
            height: 62px;
            border-bottom: 1px solid #e1e1e1;
        }
        .logo {
            width: 179px;
            height: 25px;
            float: left;
            margin-top: 20px;
            background: url(../images/logo.png) no-repeat;
        }

        .btns {
            width: 980px;
            height: 55px;
        }


        .btns .active{
            background:skyblue;
        }

        .btns input{
            width:150px;
            height:50px;
            background:#ddd;
            border:0px;
            outline:none;
            font: 700 14px "微软雅黑";
        }
        .btns input:hover{
            color: red;
        }


        .cons{
            height:800px;
            background:skyblue;
        }

        .cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .cons .current{
            display:block;
        }

         .footer-b {
            text-align: center;
            font-size: 12px;
            line-height: 30px;
         }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
           var $btn = $('.btns input');
           var $div = $('.cons div');
           $btn.click(function(){
               // 链式编程
               $(this).addClass('active').siblings().removeClass('active');
               // alert( $(this).index() );
               $div.eq( $(this).index() ).addClass('current').siblings().removeClass('current');
           })
        })
    </script>
</head>
<body>
<div class="box">
    <!-- 头部开始 -->
    <div class="header">
        <div class="logo"></div>
    </div>
    <!-- 头部结束 -->


    <!-- 导航开始 -->
    <div class="btns">
        <input type="button" value="topo数据信息展示" class="active">
        <input type="button" value="文件上传">
        <input type="button" value="文件查看">
        <input type="button" value="新增服务和删除服务">
        <input type="button" value="查看服务状态">
    </div>
    <!-- 导航结束 -->

    <!-- 内容开始 -->
    <div class="cons">
        <div class="current">按钮一对应的内容</div>
        <div>按钮二对应的内容</div>
        <div>按钮三对应的内容</div>
        <div>按钮4对应的内容</div>
        <div>按钮5对应的内容</div>
    </div>
    <!-- 内容结束 -->

    <!-- footer部分开始 -->
    <br>
    <hr>
    <div class="footer-b">
        &copy;2019版权所有 中软服务科技有限公司<br/>
     <br/>
    </div>
    <!-- footer部分结束 -->
</div>
</body>
</html>

大官人遛狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录