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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jquery创建div 实现代码
Apr 27 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
用vue写一个日历
Nov 02 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
MySQL相关说明
2007/01/15 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python多分支if语句的使用
2020/09/03 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
授权委托书格式模板
2014/04/03 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
python中urllib包的网络请求教程
2022/04/19 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Java实现简单小画板
2022/06/10 Java/Android