最近在翻看几年前存储的知识点,顺便把一些有意义的知识点形成文字,以便对一些刚入门前端的小伙伴提供帮助。本文由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选项卡功能,源码的全部内容,欢迎指导交流

微信交流(备注:前端)