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 相关文章推荐
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
JS中数据结构之栈
Jan 01 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 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
收音机的保养
2021/03/01 无线电
php 高性能书写
2010/12/11 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
Python生成器(Generator)详解
2015/04/13 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
python 制作本地应用搜索工具
2021/02/27 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
个人维稳承诺书
2015/05/04 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书