jQuery+css实现的tab切换标签(兼容各浏览器)


Posted in Javascript onJanuary 28, 2016

本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现的tab切换标签(兼容各浏览器)

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>tab切换</title>
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
 <script type="text/javascript" >
  (function ($) {
   function set_active(tab, isActive, mode) {
    if (!tab) return;
    if (!isActive) {
     tab.removeClass('active');
     if (mode == "header") {
      var related_body = $(tab.find('a').attr('tab_body'));
      set_active(related_body, false, "body");
     }
    } else {
     tab.addClass('active');
     if (mode == "header") {
      var related_body = $(tab.find('a').attr('tab_body'));
      set_active(related_body, true, "body");
     }
    }
   }
   function change_active(self_$_obj) {
    var _self_tab_header = self_$_obj.parent();
    var prev_active_tab_header = _self_tab_header.parent().find('.active');
    set_active(prev_active_tab_header, false, "header");
    set_active(_self_tab_header, true, "header");
   }
   function init(self) {
    if (self.tab_header_length <= 0) { return; }
    var defaut_active_tab_header = null;
    for (var i = 0, length = self.tab_header_length; i < length; i++) {
     var tab_header = $(self.tab_header_array[i]);
     var tab_header_linker = tab_header.find('a');
     tab_header_linker.attr("tab_body", tab_header_linker.attr("href"));
     tab_header_linker.removeAttr("href");
     tab_header_linker.bind("click", function () {
      change_active($(this));
     });
     if (tab_header.hasClass('active')) {
      defaut_active_tab_header = tab_header;
     }
    }
    if (defaut_active_tab_header) {
     change_active($(defaut_active_tab_header.find('a')));
    } else {
     change_active($(self.tab_header_array[0].find(a)));
    }
   }
   $.fn.c_tab = function () {
    var _self = $(this);
    _self.tab_header_group = _self.find('.tab_header_group');
    _self.tab_header_array = _self.tab_header_group.find('.tab_header');
    _self.tab_header_length = _self.tab_header_array.length;
    if (_self.tab_header_length == 0) {
     return;
    }
    init(_self);
   }
  })($);
  $(document).ready(function () {
   $("#tabContainer").c_tab();
  });
 </script>
 <style type="text/css" >
  body { margin:0; padding:0; background:#DFEFFF; }
  #tabContainer { width:500px; height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }
  .tab_header_group { color:Green; z-index:10; background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0; border-bottom:1px solid gray; border-radius:4px 4px 0 0;}
  .tab_header { line-height:30px; font-size:14px; display:inline-block; cursor:pointer; margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px; border-radius:4px 4px 0 0; }
  .tab_header a,a:hover { text-decoration:none; }
  .tab_header:hover { background:#F5F5F5; }
  .tab_header_group .active { margin-bottom:0px; background:gray; color:#fff; }
  .tab_body { margin-top:1px; display:none; }
  .tab_body_group .active { display:block; }
 </style>
</head>
<body>
<div id="tabContainer">
 <ul class="tab_header_group">
  <li class="tab_header"><a href="#tab1" >首页1</a></li>
  <li class="tab_header"><a href="#tab2" >首页2</a></li>
  <li class="tab_header active"><a href="#tab3" >首页3</a></li>
  <li class="tab_header"><a href="#tab4" >首页4</a></li>
  <li class="tab_header"><a href="#tab5" >首页5</a></li>
 </ul>
 <div class="tab_body_group">
  <div id="tab1" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab1
  </div>
  <div id="tab2" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab2
  </div>
  <div id="tab3" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab3
  </div>
  <div id="tab4" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab4
  </div>
  <div id="tab5" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab5
  </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
JS与C#编码解码
Dec 03 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
You might like
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
Mac下安装vue
2018/04/11 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python找出完数的方法
2018/11/12 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
几个Shell Script面试题
2012/08/31 面试题
校园活动策划书范文
2014/01/10 职场文书
村委会贫困证明
2014/01/14 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
服务标语大全
2014/06/18 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
python数字类型和占位符详情
2022/03/13 Python