导航栏切换

最新推荐文章于 2024-09-17 13:42:29 发布

chixuanli0216

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3883702/blog/1862060

版权


<!DOCTYPE html>  
<html>

<head>  
    <meta charset="utf-8" />  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
    <style type="text/css">  
        .lg-tab {  
            display: flex;  
            justify-content: space-around;  
            align-items: center;  
            margin-bottom: 4px;  
            background-color: #FFFFFF;  
        }  
          
        .lg-tab>div {  
            width: 30%;  
            line-height: 38px;  
            text-align: center;  
            border-width: 4px 0;  
            font-size: 14px;  
            color: #333;  
            position: relative;  
            border-bottom: 1px solid #d9d9d9;  
        }  
          
        .lg-tab .lg-tab-active {  
            color: #62ab00;  
            border-bottom: 2px solid #62ab00;  
        }  
          
        .lg-hide{  
            display: none !important;  
        }  
          
    </style>  
      
</head>

<body>  
    <div class="contiler">  
        <div class="content">  
            <div class="lg-tab">  
                <div id="lg-normal-tab" class="lg-normal-tab lg-tab-active">待使用</div>  
                <div id="lg-phone-tab" class="lg-normal-tab">已使用</div>  
                <div id="lg-date-tab" class="lg-normal-tab">已过期</div>  
            </div>  
            <div class="lg-normal-f " id="yh-1">  
             1  
            </div>  
            <div class="lg-normal-f lg-hide" id="yh-2">  
             2                 
            </div>  
            <div class="lg-normal-f lg-hide" id="yh-3">  
             3  
            </div>  
        </div>  
    </div>  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $(".lg-normal-tab").click(function () {  
                var index=$(this).index();  
                $(".lg-normal-tab").removeClass("lg-tab-active");  
                $(this).addClass("lg-tab-active");  
                if($(".lg-normal-tab").hasClass("lg-tab-active")){  
                    $(".lg-normal-f").addClass("lg-hide");  
                    $(".lg-normal-f").eq(index).removeClass("lg-hide");  
                }  
            });  
        });      
    </script>  
</body>

</html>

转载于:https://my.oschina.net/u/3883702/blog/1862060