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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
使用javascript做在线算法编程
May 25 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
CentOS6.5设置Django开发环境
2016/10/13 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python中比较两个列表的实例方法
2019/07/04 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
三下乡活动方案
2014/01/31 职场文书
年级组长自我鉴定
2014/02/22 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
公司授权委托书范文
2014/08/02 职场文书
绿色小区申报材料
2014/08/22 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
学生检讨书怎么写
2015/05/07 职场文书
党支部培养考察意见
2015/06/02 职场文书
浅析Python中的套接字编程
2021/06/22 Python