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 隔行换色函数代码
Oct 24 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
js+html制作简单验证码
2017/02/16 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
使用Python写个小监控
2016/01/27 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
标记环介质访问控制协议
2016/03/27 面试题
感恩节活动方案
2014/01/27 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书