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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
javascript实现 在光标处插入指定内容
May 25 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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性能优化大全(php.ini)
2016/05/20 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python构建基础的爬虫教学
2018/12/23 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python算法中的时间复杂度问题
2019/11/19 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
酒店管理自荐信
2013/10/23 职场文书
大学生党员承诺书
2014/05/20 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
高三英语教学反思
2016/03/03 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android