基于jquery的9行js轻松实现tab控件示例
更新时间：2013年10月12日 11:26:42 作者：
tab控件的实现方法有很多，在本文为大家详细介绍下如何通过9行js实现简单的tab控件，感兴趣的朋友不要错过
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/**
* 考虑到tab和pane有可能被动态的添加和删除，
* 所以每次都废点时间去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){
$("#"+$("#"+activeId).attr("tar")).css("display","none");
$("#"+activeId).removeAttr("id");
$(this).attr("id",activeId);
$("#"+$(this).attr("tar")).css("display","block");
});
};
</script>
</head>
<style>
li{
border:1px solid #b5e2f3;
border-bottom:0px;
float:left;
width:100px;
height:25px;
margin:0 7px;
background:#F1FEF3;
padding:9px 0 0 0;
text-align:center;
color:#33a3dc;
cursor:pointer;
}
ul{
width:800;
height:36px;
border-bottom:1px solid #b5e2f3;
}
#selected{
background:#FFF!important;
border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
height:300px;
background:#FFFFFF;
width:800px;
height:100px;
padding:25px;
border:1px solid #b5e2f3;
}
</style>
<body>
<div id="tab">
<ul>
<li tar="cate1" id="selected">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</div>
<div>
<div id="cate1" style="display:block;">
1
</div>
<div id="cate2" style="display:none;">
2
</div>
<div id="cate3" style="display:none;">
3
</div>
<div id="cate4" style="display:none;">
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>
相关文章
这篇文章主要介绍了jQuery实现的placeholder效果,可实现输入框提示文字的功能,并且针对焦点的情况判定是否显示,非常简单实用,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了基于BootStrap环境写jQuery tabs插件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
近期公司积极组织我们这些开发人员学习进步，督促我们学习更多的技术来提高自己。为此我选择了jQuery作为我学习的方向，同时我也是想将我的学习心得分享给大家，以后我会不断的更新一系列jQuery方面的学习纪要，帮助大家学习。2010-01-01
这篇文章主要给大家介绍jquery事件处理的一些特征，jquery事件命名机制的相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-08-08
这篇文章主要介绍了jQuery中$.extend()用法,实例分析了extend()方法的功能、定义及相关的使用技巧,需要的朋友可以参考下2015-06-06
jQuery操作CheckBox的方法介绍(选中,取消,取值)
本篇文章主要是对jQuery操作CheckBox的方法(选中,取消,取值)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文给大家介绍如何给Carousel插件添加新的功能，非常方便以后的程序开发，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了jQuery实现Meizu魅族官方网站的导航菜单效果,可实现导航菜单项鼠标滑过出现下划线动态跟随的功能,通过jQuery插件实现该功能,需要的朋友可以参考下2015-09-09
有了jquery一切变的如此简单！让js做的动画更有动感。2010-04-04
这篇文章主要为大家详细介绍了jquery实现点击弹出对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最新评论