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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
javascript中的new使用
Mar 20 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
react-router中的属性详解
2017/06/01 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
缓刑人员思想汇报
2014/10/11 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android