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 相关文章推荐
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Javascript模拟实现new原理解析
Mar 03 Javascript
原生JS实现萤火虫效果
Mar 07 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
python实现基于SVM手写数字识别功能
2020/05/27 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Django REST 异常处理详解
2020/07/15 Python
Python排序函数的使用方法详解
2020/12/11 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
毕业学生推荐信
2013/12/01 职场文书
班组安全员工作职责
2014/02/01 职场文书
保护环境建议书
2014/03/12 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
企业党员一句话承诺
2014/05/30 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis