您现在的位置是:首页 > 学无止境 > web前端 > web前端

jquery tab切换方法!

张肖龙2018-10-28web前端人已围观

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .tabcon{display: none}
    .tabcon.active{
        display: block;
    }
    .tabitem.active{color: red;}

</style>
<body>
<ul>
    <li class="tabitem active"><a href="#">页面一</a></li>
    <li class="tabitem"><a href="#">页面二</a></li>
    <li class="tabitem"><a href="#">页面三</a></li>
</ul>
<div class="tabcon active">内容一</div>
<div class="tabcon">内容二</div>
<div class="tabcon">内容三</div>
</body>
<script src="jquery-3.0.0.js"></script>
<script>
    $(".tabitem").click(function(){
        var lis=$(".tabitem")
        var divs=$(".tabcon")
        for(var i=0;i<lis.length;i++){
            if(lis[i]==this){
                $('.tabitem').removeClass('active')
                $('.tabcon').removeClass('active')
                lis.eq(i).addClass("active")
                divs.eq(i).addClass("active")
            }
        }
    })
</script>
</html>

上一篇:不让padding影响元素的宽度

下一篇:没有了

文章评论

站点信息

  • 建站时间:2018年04月1日
  • 网站程序:织梦CMS5.7
  • 文章统计:100条
  • 统计数据站长统计
  • 我的微信:网站制作,互换友链,扫描二维码,加我好友