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