jquery tab切换效果,css样式自己定义下即可。

发布于 2021-04-17 09:26:13
<!doctype html>
    
<html>
    
<head >
    
<meta charset="utf-8">
    
 
    
<title>jQuery tab切换</title>
    
 
    
<style>
    
    .inform-text{display:none;}
    
    .inform-text.show{display:block;}
    
</style>
    
 
    
 
    
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
 
    
</head>
    
<body>
    
 
    
<div class="mobile-wrap center mobile-wrap-mb">
    
 
    
 
    
        <div class="inform">            
    
            <div class="inform-list">
    
                <ul>
    
                    <li class="acti">个人信息</li>
    
                    <li>修改资料</li>                    
    
                </ul>
    
            </div>
    
            <div class="inform-text show">
    
                dddddd
    
            </div>
    
            <div class="inform-text">
    
                sss
    
            </div>    
    
        </div>
    
 
    
 
    
</div>
    
 
    
<script type="text/javascript">
    
    $('.inform-list ul li').click(function(){
    
        var n=$(this).index();
    
        $(this).addClass('acti').siblings().removeClass('acti');
    
    
    
        //$('.inform-text').fadeOut();
    
        //$('.inform-text').eq(n).fadeIn();
    
        
    
        $('.inform-text').hide();
    
        $('.inform-text').eq(n).show();
    
 
    
    })
    
</script>
    
</body>
    
</html>



关注公众号,了解更多it技术(it问答网

0 条评论

发布
问题