zoukankan      html  css  js  c++  java
  • 简单实现tab标签页切换

    常见面试题:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery/jquery-1.11.1.min.js"></script>
        <style>
            *{
                margin:0px;
                padding:0px;
                list-style: none;
            }
            .main{
                500px;
                height:500px;
                margin:auto;
                margin-top:100px;
    
            }
            .tab{
                overflow:hidden
            }
            .tab li{
                float:left;
                100px;
                height:30px;
                border:1px solid #76b4ff;
                border-bottom:none;
                margin-right:5px;
            }
            .tab li:hover{
               background-color:#7EC4CC;
                color:white;
            }
            .check{
                background-color:#7EC4CC;
                color:white;
            }
            .content{
                border:1px solid #76b4ff;
                height:200px;
                500px;
            }
            .content li{
    
            }
            .hidden{
                display:none;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="tab">
                <ul>
                    <li>new</li>
                    <li>text</li>
                    <li>pic</li>
                </ul>
            </div>
            <div class="content">
                <ul>
                    <li>我是第一页</li>
                    <li>我是第二页</li>
                    <li>我是第三页</li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        $(".tab li").click(function(){
            $(".tab li").removeClass("check");
            $(".content li").addClass("hidden");
            $(this).toggleClass("check");
            var num=$(this).index();
            switch(num){
                case 0:
                    $(".content li:eq("+num+")").removeClass("hidden");
                    break;
                case 1:
                    $(".content li:eq("+num+")").removeClass("hidden");
                    break;
                case 2:
                    $(".content li:eq("+num+")").removeClass("hidden");
                    break;
            }
        });
    </script>
    </html>
    
  • 相关阅读:
    【js效果】密码的显示和隐藏
    【js效果】竖向折叠二级菜单
    【js效果】单行文字滚动(从左到右)
    mysql:查询排名
    init_bootmem_node
    bootmem_init_node
    for_each_node(node)
    build_mem_type_table
    __vet_atags
    asm-offset.h 生成
  • 原文地址:https://www.cnblogs.com/weblv/p/5314846.html
Copyright © 2011-2022 走看看