前端技术 · 2020年5月9日 0

知识点回顾:jquery三行代码实现tab选项卡功能,源码

最近在翻看几年前存储的知识点,顺便把一些有意义的知识点形成文字,以便对一些刚入门前端的小伙伴提供帮助。本文由www.liuyanla.com 前端开发原创。

接下来说一下如何使用jquery,三行代码实现tab选项卡功能。我们先看看图片效果:

以下是源码,复制后,本地可以直接运行,jquery已经使用百度cdn,无需单独映入:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>选项卡</title>
    <meta name="keywords" content="{$Think.config.site-keywords}" />
    <meta name="description" content="{$Think.config.site-description}" />
<style>
    *{padding: 0px;}
    #card_nav{margin-bottom: 10px;}
    #card_list{width: 100%;}
    #card_list div {display: none;}
    .on{background: red}
    li{float: left;margin-right: 10px;list-style: none;} 
    .clear{clear: both;}
</style>
</head>

<body>

    <!-- 标签开始 -->
    <div  id='card_nav'>
        <ul>
            <li data-tid="card_one" class="on">分享</li>
            <li data-tid="card_two">任务</li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class="clear"></div>
    <!-- 标签结束 -->

    <!-- 内容开始 -->
    <div class="card_list" id="card_list">
        <div id="card_one" style="width:100px;height:100px;background:#999;display:block;">
             <p>111111111</p>           
        </div>
        <div id="card_two" style="width:100px;height:100px;background:#666;">
             <p>2222222222</p>
        </div>
    </div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $('#card_nav  li').click(function(){
        $(this).addClass('on').siblings().removeClass('on');
        var data = $(this).attr('data-tid');
        $("#"+data).show().siblings().hide();
    })
</script>

</body>
</html>

jq说明:
点击选项卡
当前li添加on,除了当前li之外的li删除on
获取当前li中绑定的tid数据
使用获取的tid,指定其id显示,其他隐藏

以上就是jquery三行代码实现tab选项卡功能,源码的全部内容,欢迎指导交流