jQuery简单实现tab选项卡切换效果

 更新时间:2016年06月20日 11:29:06   转载 作者:沫鱼  
这篇文章主要介绍使用jQuery封装了一个tab选项卡切换的插件,需要的朋友可以参考下。

抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~

效果图:

//img.jbzj.com/file_images/article/201606/201606201125406.jpg

代码:

<!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怎样实现ajax联动框(二)

    jquery怎样实现ajax联动框(二)

    ajax联动框想必大家早有所耳闻,接下来将介绍jquery实现另一种形式的联动框,右边的联动框用jquery生成,仿照上篇的js方法修改的,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    本文给大家介绍jquery easyui布局之动态添加tabs标签页,实现思路是这样的通过调用add方法就可以轻松实现,本文分步骤给大家详细介绍,需要的朋友一起学习吧
    2015-11-11
  • Bootstrap table 实现树形表格联动选中联动取消功能

    Bootstrap table 实现树形表格联动选中联动取消功能

    这篇文章主要介绍了Bootstrap table 实现树形表格联动选中联动取消功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 基于jquery实现省市联动特效

    基于jquery实现省市联动特效

    这篇文章主要介绍了基于jquery实现省市联动特效,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 移动端jQuery修正Web页面滑动时div问题的两则实例

    移动端jQuery修正Web页面滑动时div问题的两则实例

    这篇文章主要介绍了移动端jQuery修正Web页面滑动时div问题的两则实例,分别针对顶部固定fixed不为0时滑动出现的闪动以及touchmove的受阻止的相关问题,需要的朋友可以参考下
    2016-05-05
  • 简单的jQuery入门指引

    简单的jQuery入门指引

    这篇文章主要介绍了简单的jQuery入门指引,jQuery是当今最为流行的JavaScript库,需要的朋友可以参考下
    2015-07-07
  • Jquery 自定义动画概述及示例

    Jquery 自定义动画概述及示例

    animate用于创建自定义动画的函数,这个函数的关键在于指定动画形式及结果样式属性对象,接下来为大家介绍下它的使用方法,感兴趣的朋友可以参考下哈
    2013-03-03
  • easy ui datagrid 从编辑框中获取值的方法

    easy ui datagrid 从编辑框中获取值的方法

    下面小编就为大家带来一篇easy ui datagrid 从编辑框中获取值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 基于jquery的无刷新分页技术

    基于jquery的无刷新分页技术

    基于jquery的无刷新分页技术,需要的朋友可以参考下。
    2011-06-06
  • jQuery实现淡入淡出的模态框

    jQuery实现淡入淡出的模态框

    这篇文章主要为大家详细介绍了jQuery实现淡入淡出的模态框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论