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


Posted in Javascript onJune 20, 2016

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

效果图:

jQuery简单实现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>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
js 通用订单代码
Dec 23 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 #Javascript
Javascript操作表单实例讲解(下)
Jun 20 #Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
You might like
回帖脱衣服的图片实现代码
2014/02/15 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript 常用函数
2009/12/30 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jquery 使用简明教程
2014/03/05 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python optparse模块使用实例
2015/04/09 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python