jQuery简单实现tab选项卡切换效果
更新时间：2016年06月20日 11:29:06 作者：沫鱼
这篇文章主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<title>简单的tab效果</title>
<style type="text/css">
* {
padding: 0px;
margin:0px
}
body {
text-align: center
}
.wrap ul {
overflow: hidden
}
.wrap li {
float: left;
list-style: none;
margin-right: 10px;
cursor: pointer;
padding: 2px 5px
}
.link {
cursor: pointer;
color: #F00
}
.wrap {
width: 200px;
margin: 50px auto
}
.wrap, .ellipsis {
font-size: 12px;
width: 200px;
}
.tab_div div {
display: none;
padding: 10px;
}
.tab_div {
text-align: left;
border: 1px #CCC solid;
height: 200px;
clear: both
}
.cur {
background: #060;
color: #FFF
}
#setTab_2{
margin-top: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//tab
$("#setTab").setTab();
$("#setTab_2").setTab();
});
/*插件代码*/
(function ($) {
$.fn.setTab = function () {
var getTab=$(this),//this指向调用函数的ID
panels = getTab.children("div.tab_div").children("div"),
tabs = getTab.find("li");
return this.each(function(){
$(tabs).click(function(e) {
var index = $.inArray(this, $(this).parent().find("li"));//this指向li
if (panels.eq(index)[0]) {
$(tabs).removeClass("cur");
$(this).addClass("cur");
panels.css("display", "none").eq(index).css("display", "block");
}
});
});
}
})(jQuery);
</script>
</head>
<body class="wrap">
<div id="setTab">
<ul class="tab_nav">
<li class="cur">国事</li>
<li>军情</li>
<li>图片</li>
</ul>
<div class="tab_div">
<div style="display: block">国事</div>
<div>军情</div>
<div>图片</div>
</div>
</div>
<div id="setTab_2">
<ul class="tab_nav">
<li>国事</li>
<li class="cur">军情</li>
<li>图片</li>
</ul>
<div class="tab_div">
<div>国事</div>
<div style="display: block">军情</div>
<div>图片</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Jquery 选择器是最基本的操作了，当我们用原生的javascript的时候，我们为了选择一个对象不得不花费九头二虎之力2010-04-04
js清空option之前清空option ，我的做法是遍历现有option，将其每个子元素都置空即可。2011-03-03
这篇文章主要介绍了jQuery实现dialog设置focus焦点的方法,涉及jQuery针对dialog的操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法,可实现页面滚动的时候指定位置悬浮固定的效果,涉及jquery针对页面元素属性的动态操作技巧,需要的朋友可以参考下2015-08-08
本文给大家总结了几种使用jQuery实现的分页插件，效果非常不错，有需要的小伙伴可以参考下。2015-11-11
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
这篇文章主要介绍了jQuery实现浏览器之间跳转并传递参数功能,具有支持中文字符传输的功能,涉及jQuery编码转换、事件响应、页面跳转等相关操作技巧,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了jQuery无缝轮播图代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
下面小编就为大家带来一篇JQuery点击行tr实现checkBox选中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了EasyUI在表单提交之前进行验证的实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了8个超实用的jQuery功能代码分享,本文介绍了禁用右键单击功能、使用jQuery设定文本大小、在新窗口打开链接、更改样式列表、返回到顶部链接、获取鼠标指针X/Y轴等功能代码,需要的朋友可以参考下2015-01-01
最新评论